Para entender e aprender melhor o SwiftUI, vamos aprender rapidamente os três layouts básicos do SwiftUI: HStackcontêiner de layout horizontal, contêiner de VStacklayout vertical e ZStackcontêiner de layout em cascata.
No processo de desenvolvimento real, a página de login é uma página indispensável para produtos móveis e também é um projeto de boas práticas.
Em seguida, usaremos 10 minutos para criar um layout de página de login, usando o seguinte rascunho de design de interface do usuário como exemplo:
Análise de página - Composição do elemento
Usando a ideia de design de cima para baixo para desmontar os elementos do rascunho do design da interface do usuário, as seguintes informações podem ser obtidas:
- Imagem de fundo: use o componente básico Image, você precisa esticar a tela inteira e outros elementos estão dentro da imagem
- Texto de descrição: Dois parágrafos de texto com tamanhos diferentes são compostos de layout vertical e o alinhamento é alinhado à esquerda
- Método de login: o layout vertical de dois botões com cor de preenchimento e cor de texto inconsistentes e o método de alinhamento é alinhamento central
- Texto secundário: consiste em texto e botões de texto em um layout horizontal
Após desmontar os elementos da página, o próximo passo é programar o código de acordo com os elementos da página e seu layout.
Programação prática - imagem de fundo
No projeto de programação SwiftUI, existem duas maneiras de exibir imagens, uma é carregar a imagem localmente através da URL da imagem obtida pela solicitação de rede e a outra é importar a imagem preparada e usá-la diretamente.
O primeiro pode atualizar imagens de acordo com os diferentes dados de solicitação, e o último é mais comumente usado em cenários de negócios, como fundos de página que basicamente não precisam ser alterados.
A interface de login pertence a este último, para que possamos importar diretamente as imagens necessárias nas ferramentas de desenvolvimento do Xcode.
Clique no arquivo na barra de ferramentas de visualização Assets.xcassets, clique no ícone "+" na parte inferior e selecione Import, conforme mostrado na janela pop-up a seguir:
Selecione a imagem e importe-a. Após a conclusão da importação, você poderá ver a imagem importada na área de visualização de Ativos.
Para facilitar o uso posterior, a imagem é renomeada aqui bgImage, conforme mostrado na figura a seguir:
回到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自适应。
paddingO modificador define a margem do texto. O backgroundmodificador define o plano de fundo da exibição de texto de texto para incluir a cor de preenchimento do layout que estica a margem. O cornerRadiusmodificador define o número de ângulos arredondados.
Vale a pena notar aqui que a ordem dos modificadores determina o estilo, e os modificadores atribuídos à vista têm prioridade. Por exemplo , se o modificador estiver na backgroundfrente e o paddingmodificador estiver atrás, o botão terá apenas um pequeno pouco atrás do texto preenchido com cor. O efeito atual não pode ser alcançado.
Programação prática - texto auxiliar
Por fim, há a parte de texto auxiliar, que pode ser dividida em 4 parágrafos após análise: 登录即代表同意(texto), 用户协议(botão), 和(texto), 隐私政策(botão), sendo que o conteúdo desses quatro parágrafos adota um layout horizontal.
Além disso, a relação de layout com outros elementos também precisa ser considerada.De cima para baixo, a visualização do modo de login está na relação de layout vertical . Esta parte do código é a seguinte:
VStack(alignment: .center, spacing: 40) {
//登录方式视图
//辅助文字视图
HStack {
Text("登录即表明同意")
.foregroundColor(.white)
Button(action: {}) {
Text("用户协议")
}
Text("和")
.foregroundColor(.white)
Button(action: {}) {
Text("隐私政策")
}
}
}
复制代码resumo do capítulo
Parabéns, você concluiu sua primeira página SwiftUI!
Neste capítulo, aprendemos três métodos básicos de layout de página: HStacklayout horizontal, layout VStackvertical e ZStacklayout em cascata, e aprendemos o uso de componentes básicos, componentes Imagede imagem, componentes de Texttexto e Buttoncomponentes. A interação funcional ainda precisa ser melhorada, mas depois de dar esse passo, o caminho para aprender SwiftUI será muito mais fácil.
Espero que você possa não apenas ler o artigo, mas também afundar e digitar o código. Quando uma página após a outra estiver voando na ponta dos dedos, acredito que você também terá confiança e interesse em aprender mais sobre o SwiftUI e entender sua simplicidade .
No próximo capítulo, aprenderemos mais sobre projetos SwiftUI e construiremos um projeto após o outro. Por favor, continue ansioso por isso~
Aviso de direitos autorais
Este artigo é o primeiro artigo assinado da comunidade de tecnologia de pepitas de terras raras. A reimpressão é proibida dentro de 14 dias e a reimpressão é proibida sem autorização após 14 dias. A violação deve ser investigada!