¡Acostúmbrate a escribir juntos! Este es el tercer día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .
Prólogo: Escribir es una especie de templado, ver cada palabra que aparece en Internet, hay una sensación de satisfacción indescriptible. Anteriormente hice una serie de videos sobre gerentes de producto en la estación B, pero esta vez quiero hacer una serie de artículos sobre desarrollo en Nuggets.
Declaración de trabajo de hoy: en cualquier entorno, debe descubrir las ventajas de los demás, pero mientras aprende las ventajas de los demás, no olvide sus propias características personales, porque esta es su ventaja.
En el proceso de desarrollo de la interfaz, a menudo podemos ver que una página constará de muchos controles de la interfaz de usuario, como: el texto y las imágenes se organizan hacia arriba y hacia abajo, hacia la izquierda y hacia la derecha, o el texto está en el medio de la imagen. Estas llamadas permutaciones pueden denominarse colectivamente pilas.
En este capítulo, aprenderá a utilizar las vistas de pila, que se dividen en vistas verticales de VStack, vistas horizontales de HStack y vistas superpuestas de ZStack.
VStack: las vistas se organizan verticalmente;
HStack: las vistas se organizan horizontalmente;
ZStack: disposición de superposición de vista;
La siguiente leyenda puede ayudar rápidamente a comprender y recordar estos tres puntos de vista:
Intentemos completar la programación del ejemplo de interfaz de usuario a continuación.
Primero, creemos un nuevo proyecto llamado SwiftUIStacks.
Primero desmontemos el diagrama de IU en dos partes: título y plan de pago.
La primera es la sección de encabezado, como se muestra en el siguiente prototipo:
La parte del título consta de dos Textos, Texto ("Paquete de Membresía") y Texto ("Desbloquear Funciones Premium").
Los dos textos están dispuestos hacia arriba y hacia abajo. Usamos VStack{} para "envolver" los dos textos juntos.
El título se puede embellecer agregando algunos estilos, como: peso de fuente, tamaño de texto, etc.
VStack {
Text("会员套餐")
.fontWeight(.bold)
.font(.system(.title))
Text("解锁高级功能")
.fontWeight(.bold)
.font(.system(.title))
}
复制代码La vista predeterminada de la pila es la alineación central. Si nos alineamos a la izquierda como el borrador de la interfaz de usuario, entonces podemos agregar el parámetro de alineación a la vista vertical de VStack.
Además, queremos poder extendernos un poco entre los dos Textos, y podemos usar el parámetro de espaciado para establecer el espaciado.
| parámetro | nombre | describir |
|---|---|---|
| alineación | Centrado | .adelante alineado a la izquierda, .adelante alineado a la derecha, .centrado en el centro |
| espaciado | espaciado | espaciamiento, la distancia de espaciamiento entre los componentes |
VStack(alignment: .leading,spacing: 10) {
Text("会员套餐")
.fontWeight(.bold)
.font(.system(.title))
Text("解锁高级功能")
.fontWeight(.bold)
.font(.system(.title))
}
复制代码OK, ¡hemos terminado con la parte del título!
我们发现标题和下面的定价方案是上下排列，那么我们可以先用一个VStack包裹起来。
特别说明：组件之间缺少Stack包裹，那么系统是不知道它是什么排列方式的，会报错。
鼠标移动到VStack的位置，键盘按住command键，单击鼠标，我们可以看到Xcode提供了快捷动作的编程方式。
我们选择Embed in VStack，那么我们在之前VStack外面会再包裹一层VStack。
这样做的好处是，我们常常编程时，代码多的情况下会不知道“{}”是包裹什么代码的，或者漏了末尾的“}”。
在这里我们可以先备注下Stack包裹的代码块，便于我们找到代码块的起始位置和终止位置。
VStack {
//标题
VStack(alignment: .leading,spacing: 10) {
Text("会员套餐")
.fontWeight(.bold)
.font(.system(.title))
Text("解锁高级功能")
.fontWeight(.bold)
.font(.system(.title))
}
//定价方案
}
复制代码下面我们来做付费方案的部分。
先分析下UI稿，我们可以看到有3个定价方案，我们看到的尺寸大小基本是一致的，使用HStack横向排布的方式。
我们先做单个定价方案的样例，再复制其他2个，修改下颜色就行了。
在这里我们先忽略“首月特惠”的样式，因为这块用到了ZStack，那么这块先放在最后。
分析下单个定价方案，我们发现由Text(“连续包月”)、Text(“¥18”)组成，我们依旧可以用VStack纵向排列。
在这个VStack外，我们可以看到它有撑开的部分.padding，背景颜色.background，还有圆角.cornerRadius修饰。
// 定价方案
VStack {
Text("连续包月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(.gray)
Text("¥18")
.fontWeight(.bold)
.font(.system(size: 30))
.foregroundColor(.red)
}
.padding(20)
.background(Color.orange)
.cornerRadius(10)
复制代码代码运行后发现，和UI稿还是有点差距的，这是因为使用的系统颜色与UI设计稿的颜色相差甚远。
我们需要使用和UI设计稿一样的颜色，设置颜色的方式有2种，一种是使用RGB颜色值，一种是在Assets.xcassets文件中导入颜色再引用。
使用RGB颜色值方法如下：
// 定价方案
VStack {
Text("连续包月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
Text("¥18")
.fontWeight(.bold)
.font(.system(size: 30))
.foregroundColor(Color(red: 239/255, green: 129/255, blue: 112/255))
}
.padding(20)
.background(Color(red: 250/255, green: 247/255, blue: 243/255))
.cornerRadius(10)
复制代码导入颜色的方法如下：
点击Assets，在底部点击“+”按钮，选择Color Set（或者鼠标右键）。
为方便记忆，我们可以使用颜色值作为命名，也可以用其他便于记忆的命名。
选中Any Appearance，这是默认的颜色，Dark为黑夜模式下的颜色，Apple要求上架的应用必须适配黑夜模式。
点击左侧顶部“设置”页，点击Color下的Show Color panel，这时会打开颜色选项弹窗。
我们可以设置RGB颜色，也可以使用Hex颜色设置，这里我们设置Hex Color 为faf7f3。
我们回到ContentView.swift文件，把VStack的背景颜色改成Color(“faf7f3”)，在Color()中输入我们之前导入的颜色名称。
这样我们就可以引用录入的颜色了。
两种方式在实际业务开发中都可以使用，主要看个人习惯，没有优劣之分。
让我们回到定价方案的编程。
我们可以看到连续包月的定价方案有一个圆角的边框，我们可能会想到之前在Text中学到的.border()参数。
那先看看效果。
// 定价方案
VStack {
Text("连续包月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(Color(red: 190/255, green: 188/255, blue: 184/255))
Text("¥18")
.fontWeight(.bold)
.font(.system(size: 30))
.foregroundColor(Color(red: 239/255, green: 129/255, blue: 112/255))
}
.padding(20)
.background(Color("faf7f3"))
.border(Color(red: 202/255, green: 169/255, blue: 106/255),width: 2)
.cornerRadius(10)
复制代码首先科普一个知识点。
在编程区中不难发现，我们把.border()代码放在了.cornerRadius(10)前面。
这是因为SwiftUI语言中，修饰符是顺序执行的，也就是我们是先有边框，才把边框编程10度的圆角。
如果先有圆角，再有边框，那么我们就会得到里面的撑开的颜色是圆角的，但边框是直角的，不妨试试效果。
另外一点，我们看到模拟器中，圆角边框缺失了4个角。
这是因为SwiftUI默认为maskToBounds，所以这种方式设置的圆角会被裁剪一部分。
这时我们不能用这种方式设置，我们可以使用之前学过的.overlay()修饰符“覆盖”一个圆角。
// 定价方案
VStack {
Text("连续包月")
.fontWeight(.bold)
.font(.system(size: 17))
.foregroundColor(Color(red: 190 / 255, green: 188 / 255, blue: 184 / 255))
Text("¥18")
.fontWeight(.bold)
.font(.system(size: 30))
.foregroundColor(Color(red: 239 / 255, green: 129 / 255, blue: 112 / 255))
}
.padding(20)
.background(Color("faf7f3"))
.overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2))
复制代码代码.overlay(RoundedRectangle(cornerRadius: 6).stroke(Color(red: 202 / 255, green: 169 / 255, blue: 106 / 255), lineWidth: 2)看起来特别长，不用担心，我们理解下它。
RoundedRectangle()：圆角矩形；
cornerRadius：圆角度数；
stroke：描边；
Color：颜色；
lineWidth：线度；
用自然语言来阅读下代码：给这个视图加一个圆角，再给圆角描个有颜色的线框。
好了，我们完成了第一个定价方案的编程啦！
Este conocimiento es demasiado, así que simplemente lo escribo en dos capítulos, ¡esperen con ansias la siguiente parte!