快速上手·10分钟完成一个登录界面布局

为了更好地了解和学习SwiftUI，咱们快速学习SwiftUI的三种根本布局：HStack水平布局容器、VStack笔直布局容器、ZStack层叠布局容器。

在实践开发过程中，登录页面是移动端产品必不可少的页面，也是很好的练手项目。

接下来，咱们将用10分钟来构建一个登录页面布局，以下面UI规划稿为例：

页面分析-元素构成

选用自顶向下的规划思想拆解UI规划稿的元素，能够得到以下的信息：

• 布景图片：运用Image根本组件，需求拉伸全屏，其他元素在图片内部
• 阐明文字：两段巨细纷歧致的文字笔直布局组成，对齐方法为左对齐
• 登录方法：两个填充色和文字色彩纷歧致的按钮笔直布局组成，对齐方法为居中对齐
• 辅佐文字：由文字和文字按钮横向布局组成

拆解完页面元素后，接下来将按照页面元素及其布局方法进行代码编程。

实战编程-布景图片

在SwiftUI编程项目中有两种展示图片的方法，一种是经过网络请求取得的图片URL再在本地加载图片，一种是导入准备好的图片直接运用。

前者能够依据请求数据的不同更新图片，后者较常用于根本不怎么需求变化的页面布景等事务场景中。

登录界面属于后者，因而咱们能够直接在Xcode开发工具中导入需求的图片。

点击视图工具栏的Assets.xcassets文件，点击底部“+”图标，挑选Import，如下弹窗所示：

挑选图片后导入，导入完成后，能够看Assets的预览区看到导入的图片。

为了便利后续的运用，这儿将图片重命名为bgImage，如下图所示：

回到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自适应。

padding润饰符设置文字的边距，background润饰符将Text文字视图布景包含撑开边距的布局填充色彩，cornerRadius润饰符设置圆角度数。

这儿值得注意的是，润饰符的次序决定了样式，先赋于视图的润饰符具有优先权，比方background润饰符在前，padding润饰符在后，则按钮就会只要文字背面一点点位置填充了色彩，而无法完成现在的效果。

实战编程-辅佐文字

最后是辅佐文字部分，分析后能够拆分红4段：登录即代表赞同（文字）、用户协议（按钮）、和（文字）、隐私方针（按钮），而且这四段内容选用水平布局方法。

别的还需求考虑与其他元素的布局联系，由上至下是登录方法视图，辅佐文字视图和登录方法视图是笔直布局联系。此部分代码如下：

VStack(alignment: .center, spacing: 40) {
  //登录方法视图
 //辅佐文字视图
HStack {
Text("登录即表明赞同")
.foregroundColor(.white)
Button(action: {}) {
Text("用户协议")
}
Text("和")
.foregroundColor(.white)
Button(action: {}) {
Text("隐私方针")
}
}
}

本章小结

恭喜你，完成了第一个SwiftUI页面！

在本章节中，咱们学了三种根本的页面布局方法：HStack水平布局、VStack笔直布局、ZStack层叠布局，并学习了根本组件Image图片组件、Text文本组件、Button组件的运用，当然现在咱们只完成了页面样式部分，功用交互还有待完善，但迈出这一步后，后边的SwiftUI学习之路会好走很多。

希望大家能除了看文章之外，也能沉下来敲敲代码，当一个又一个页面在指尖上飞舞，相信你也会有决心和爱好深化了解SwiftUI，了解它的简约之美。

在下一章节中，咱们将学习更多SwiftUI项目知识，搭建一个又一个项目，请保持期待吧～

版权声明

本文为稀土技术社区首发签约文章，14天内制止转载，14天后未获授权制止转载，侵权必究！