SwiftUI极简教程03:VStack, HStack, ZStack视图排列的使用(上)

一同养成写作习气！这是我参与「日新计划 4 月更文应战」的第3天，点击检查活动详情。

前语：写作是一种磨炼，看着一个个字在网上出现，有种难以言喻的满足感。之前在B站做过一个系列有关产品司理的视频，而这一次，想在做一系列关于开发的文章。

今天职言：在任何环境中都需要去发现别人身上的长处，但在学习别人长处的同时，也不要忘了自己自身的个人特性，由于这才是你的长处。

在界面开发过程中，咱们常常能够看到一个页面会有许多UI控件组成，例如：文字和图片上下摆放、左右摆放，或者文字在图片中心。这些所谓的摆放，咱们能够统称为仓库。

在本章中，你将学会怎么运用仓库视图，分为VStack笔直视图、HStack水平视图、ZStack掩盖视图。

VStack：视图笔直摆放；

HStack：视图横向摆放；

ZStack：视图掩盖摆放；

下面的图例能够快速协助了解和回忆这三个视图：

下面咱们来试试完结下面的UI示例的编程。

首要，咱们先创建一个新项目，命名为SwiftUIStacks。

咱们先把UI图拆解成两个部分：标题、付费计划。

首要是标题部分，如下原型所示：

标题部分由两个Text组成，分别是Text(“会员套餐”)、Text(“解锁高档功能”)。

两个Text是上下摆放，咱们运用VStack{}，把两个Text“包裹”在一同。

标题能够再加点样式进行美化，比如：字重、文字巨细等等。

VStack {
 Text("会员套餐")
  .fontWeight(.bold)
  .font(.system(.title))
 Text("解锁高档功能")
  .fontWeight(.bold)
  .font(.system(.title))
 }

Stack默许视图为居中对齐，假如咱们像像UI稿相同左对齐，那么咱们能够在VStack纵向视图中加入alignment参数。

另外，咱们想要两个Text之间的能够撑开一点，能够运用spacing参数设置间隔。

参数	称号	描绘
alignment	居中办法	.leading左对齐，.trailing右对齐，.center居中
spacing	间隔	间隔，组件之间的间隔间隔

VStack(alignment: .leading,spacing: 10) {
 Text("会员套餐")
  .fontWeight(.bold)
  .font(.system(.title))
 Text("解锁高档功能")
  .fontWeight(.bold)
  .font(.system(.title))
 }

好的，咱们已经完结了标题的部分啦！

咱们发现标题和下面的定价计划是上下摆放，那么咱们能够先用一个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：线度；

用自然语言来阅览下代码：给这个视图加一个圆角，再给圆角描个有色彩的线框。

好了，咱们完结了第一个定价计划的编程啦！

这一知识点有点多，干脆分隔上下两章来写，请等待接下来的部分！