Para comprender y aprender mejor SwiftUI, aprendamos rápidamente los tres diseños básicos de SwiftUI: HStackcontenedor de diseño horizontal, contenedor de VStackdiseño vertical y ZStackcontenedor de diseño en cascada.
En el proceso de desarrollo real, la página de inicio de sesión es una página indispensable para productos móviles y también es un proyecto de buena práctica.
A continuación, usaremos 10 minutos para crear un diseño de página de inicio de sesión, tomando como ejemplo el siguiente borrador de diseño de interfaz de usuario:
Análisis de página - Composición de elementos
Usando la idea de diseño de arriba hacia abajo para desmontar los elementos del borrador del diseño de la interfaz de usuario, se puede obtener la siguiente información:
- Imagen de fondo: use el componente básico Imagen, necesita estirar la pantalla completa y otros elementos están dentro de la imagen
- Texto de descripción: dos párrafos de texto con diferentes tamaños se componen de un diseño vertical y la alineación está alineada a la izquierda
- Método de inicio de sesión: el diseño vertical de dos botones con color de relleno y color de texto inconsistentes, y el método de alineación es la alineación central
- Texto secundario: consiste en texto y botones de texto en un diseño horizontal
Después de desmantelar los elementos de la página, el siguiente paso es programar el código de acuerdo con los elementos de la página y su diseño.
Programación práctica - imagen de fondo
En el proyecto de programación SwiftUI, hay dos formas de mostrar imágenes, una es cargar la imagen localmente a través de la URL de la imagen obtenida por la solicitud de red y la otra es importar la imagen preparada y usarla directamente.
El primero puede actualizar imágenes de acuerdo con los diferentes datos de solicitud, y el segundo se usa más comúnmente en escenarios comerciales, como fondos de página que básicamente no necesitan cambiarse.
La interfaz de inicio de sesión pertenece a este último, por lo que podemos importar directamente las imágenes requeridas en las herramientas de desarrollo de Xcode.
Haga clic en el archivo en la barra de herramientas de vista Assets.xcassets, haga clic en el ícono "+" en la parte inferior y seleccione Import, como se muestra en la siguiente ventana emergente:
Seleccione la imagen e impórtela. Una vez completada la importación, podrá ver la imagen importada en el área de vista previa de Activos.
Para facilitar su uso posterior, aquí se cambia el nombre de la imagen bgImage, como se muestra en la siguiente figura:
回到ContentView文件，这是SwiftUI提供的一个示例视图页面，我们使用Image图片组件引用导入的图片，示例：
struct ContentView: View {
var body: some View {
Image("bgImage")
}
}
复制代码SwiftUI图片组件使用方式为括号内，使用双引号对对象进行引用，这里Image组件引用的对象是在Assets资源库导入的bgImage图片。
实时预览后发现，由于图片尺寸大于整机屏幕尺寸，导致图片超出了可视范围。这时需要图片的常用修饰符对Image图片进行修饰，示例：
Image("bgImage")
.resizable()
.edgesIgnoringSafeArea(.all)
复制代码这里使用了2个修饰符，resizable修饰符可以对Image图片进行缩放，使图片缩放到模拟器显示范围内。
而edgesIgnoringSafeArea修饰符可对视图忽略其安全区域，这时iPhoneX以上全面屏的特性，在顶部状态栏和底部栏的区域留有安全区域，edgesIgnoringSafeArea可以忽略安全区域，让Image图片撑开整个屏幕。
实战编程-说明文字
文字部分使用Text组件，和Image组件使用方法类似，在括号内使用双引号引用文本信息，示例：
Text("开启你的意识世界")
复制代码当我们使用Text组件时，预览区域展示了2个模拟器，这是因为之前创建的Image组件和Text组件缺少布局关系，Xcode开发工具就将它们当作单独的视图分开预览。
由上面分析得知，背景图片和其他元素是层叠关系，因此需要使用到ZStack容器将多个元素进行层叠布局。
ZStack{
Image("bgImage")
.resizable()
.edgesIgnoringSafeArea(.all)
Text("开启你的意识世界")
}
复制代码视图容器的使用方式是用大括号将元素包裹在一起，包裹中的元素将符合视图容器的排列方式。
说明文字有2部分，2段文字排列方式为上下排列，由于文字字数不一，使用左对齐方式。代码如下：
VStack(alignment: .leading, spacing: 10){
Text("开启你的意识世界")
Text("首次登录自动创建新账号")
}
复制代码在VStack垂直布局容器中，修改视图的对齐方式及视图内部元素之间的间距视图括号包裹，alignment参数设置视图内元素的对齐方式，这是使用的是leading左对齐。
spacing参数设置视图内所有元素的间距，如果同样是垂直布局的元素间距不一样，则需要多个VStack垂直布局容器进行包裹。
和Image图片组件修饰符使用方法一样，可以对Text添加修饰符对文字对象进行修饰，代码如下：
VStack(alignment: .leading, spacing: 10){
Text("开启你的意识世界")
.font(.title)
.bold()
Text("首次登录自动创建新账号")
.font(.system(size: 17))
}
复制代码font修饰符可以对Text文字的字号、字体进行修饰，bold修饰符可以设置文字的字重，另外常用的文字修饰符像foregroundColor修饰符可以设置文字的填充颜色等。
实战编程-登录方式
登录方式由2个登录按钮组成，登录按钮的布局方式也是垂直布局，并且2个按钮采用的是居中对齐方式。除了考虑登录方式按钮本身外，还需要考虑登录方式和说明文字的布局方式，此部分代码如下：
VStack(alignment: .leading, spacing: 400) {
//说明文字
//登录方式
VStack(alignment: .center, spacing: 15) {
Button(action: {}) {
Text("手机号码登录")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.white)
.background(.red)
.cornerRadius(8)
}
Button(action: {}) {
Text("微信登录")
.font(.system(size: 17))
.bold()
.frame(minWidth: 0, maxWidth: .infinity)
.padding()
.foregroundColor(.black)
.background(.white)
.cornerRadius(8)
}
}
}.padding()
复制代码在说明文字和登录方式两块元素上，这里使用VStack垂直布局容器，并设置视图内对齐方式为左对齐，说明文字和登录方式视图的间距为400。
登录方式视图分为2个按钮：手机号码登录、微信登录，按钮使用到的组件是Button组件，由于Button组件的使用方式如下：
Button(action:{
//点击后操作
}) {
//按钮样式
}
复制代码Button组件样式上和其他组件一致，即任何视图都可以作为按钮，这里使用的是Text文字视图作为按钮的主体样式，并设置文字修饰符对Text视图进行修饰美化。
其中，frame修饰符可以设置组件的尺寸大小，由于iOS机型和显示区域不一，因此使用minWidth最小宽度和maxWidth最大宽度，最大宽度maxWidth设置为infinity自适应。
paddingEl modificador establece el margen del texto. El backgroundmodificador establece el fondo de la vista de texto Texto para incluir el color de relleno del diseño que estira el margen. El cornerRadiusmodificador establece el número de ángulos redondeados.
Vale la pena señalar aquí que el orden de los modificadores determina el estilo, y los modificadores asignados a la vista tienen prioridad. Por ejemplo , si el modificador está en la backgroundparte delantera y el paddingmodificador está en la parte posterior, el botón solo tendrá un pequeño poco detrás del texto lleno de color No se puede lograr el efecto actual.
Programación práctica - texto auxiliar
Finalmente, está la parte de texto auxiliar, que se puede dividir en 4 párrafos después del análisis: 登录即代表同意(texto), 用户协议(botón), 和(texto), 隐私政策(botón), y el contenido de estos cuatro párrafos adopta una disposición horizontal.
Además, también se debe tener en cuenta la relación de diseño con otros elementos. De arriba a abajo, la vista del modo de inicio de sesión tiene una relación de diseño vertical . Esta parte del código es la siguiente:
VStack(alignment: .center, spacing: 40) {
//登录方式视图
//辅助文字视图
HStack {
Text("登录即表明同意")
.foregroundColor(.white)
Button(action: {}) {
Text("用户协议")
}
Text("和")
.foregroundColor(.white)
Button(action: {}) {
Text("隐私政策")
}
}
}
复制代码Resumen del capítulo
¡Felicitaciones, ha completado su primera página de SwiftUI!
En este capítulo, hemos aprendido tres métodos básicos de diseño de página: HStackdiseño horizontal, diseño VStackvertical y ZStackdiseño en cascada, y hemos aprendido el uso de componentes básicos, componentes Imagede imagen, componentes de Texttexto y Buttoncomponentes. Por supuesto, solo hemos completado el estilo de página. La interacción funcional aún debe mejorarse, pero después de dar este paso, el camino de aprendizaje de SwiftUI será mucho más fácil.
Espero que no solo pueda leer el artículo, sino también sumergirse y escribir el código. Cuando una página tras otra esté volando en la punta de sus dedos, creo que también tendrá la confianza y el interés de aprender más sobre SwiftUI y comprender su simplicidad. .
En el próximo capítulo, aprenderemos más sobre los proyectos de SwiftUI y construiremos un proyecto tras otro. Por favor, siga esperando con ansias ~
Aviso de copyright
Este artículo es el primer artículo firmado de la comunidad tecnológica de pepitas de tierras raras. Está prohibida la reimpresión dentro de los 14 días y la reimpresión sin autorización después de los 14 días. ¡Se debe investigar la infracción!