【SwiftUI基础篇】1 常用layout(布局)HStack（横向）VStack（垂直）ZStack（叠加）

SwiftUI经常会使用到的布局方法及对其修饰的常见方法。HStack（横向）VStack（垂直）ZStack（叠加）

一、HStack 横向布局视图及LazyHStack

1、HStack 用于水平（horizontal）线上摆放子视图。并直接渲染内部的所有子视图。所以为了效率请在内容较少的时候才使用 HStack。

常用初始化：

init(alignment: VerticalAlignment = .center, spacing: CGFloat? = nil){
//这里返回一个content：View
}

a、参数1：alignment :[.top(顶部对齐）、.center（中部对齐）、.bottom（底部对齐）] 子视图的对齐方式

b、参数：spacing：CGFloat? [nil] 子视图之间的间距

c、参数：content 返回一个View的闭包，用于显示多个子视图

HStack(alignment: .top, spacing: 10) {
     ForEach(1...5, id: .self) {
         Text("子视图" + String($0))
          .layoutPriority(Double($0))//视图优先级，数字越大权限越高
    }
}

.layoutPriority 控制 HStack 中元素的布局优先级。Double值越高的视图会在空间不足的情况下尽量被满足显示。默认优先级为 0。

HStack官方解释：与LazyHStack不同的是，它只在你的应用程序需要在屏幕上显示它们时呈现视图，HStack一次呈现所有的视图，不管它们是在屏幕上还是在屏幕外。当你有少量的子视图或者不希望延迟“惰性”版本的呈现行为时，使用常规的HStack。

2、LazyHStack 的用法和 HStack 相同，仅有的区别是它会“惰性初始化”，也就是只有在子视图即将出现在屏幕上的时候，再初始化子视图。

下面是一个横向滚动的视图（重复100次），当用户滚动时HStack子视图才会被创建，当我们有大量渲染的时候请务必使用此项。

ScrollView(.horizontal) {
    LazyHStack(alignment: .top, spacing: 100) {
        ForEach(1...100, id: .self) {
            Text("第" + String($0) + "列")
            .font(.title)
            .border(Color.gray)//加个边框
        }
    }
}

小聪明：经常分不清（HZV)Stack的小伙伴。我使用拼音H为heng横着，Z像2就是2维的，剩下的V就只有竖着了。

二、VStack 垂直布局视力及LazyVStack

与上面的HStack使用方法一样，只是布局的方向发生了变化，相应的对齐方式也有所不同。

1、VStack 用于垂直（Vertical）线上摆放子视图。并立即渲染内部的所有子视图。所以为了效率请在内容较少的时候才使用 VStack。

常用初始化：参考上面的HStack，唯一不同的是对齐方式参数发生了改变alignment：[.leading（左对齐）、.center（中间）、.trailing（右对齐）]

VStack {
    ForEach(1...10, id: .self) {
        Text("子视图" + String($0))
    }
}.frame(maxWidth: 30)//限制一个最大宽度

2、LazyVStack 的用法和 VStack 相同，仅有的区别是它会“惰性初始化” ，即用户滑动子视图在频幕上的时候才渲染。代码示例参考LazyHStack，将ScrollView参数.horizontal改为.vertical(默认)

三、ZStack  2维堆叠子视图

ZStack从下往上覆盖其子视图（代码越前越在底层），并在两个轴上将它们对齐的视图。

常用初始化init:与上面不同的是少了一个spacing间距，因为是重叠的。alignment: [horizontal(水平): . leading, vertical(垂直): . bottom]或者组合参数.bottomLeading

ZStack {
    Color.purple.ignoresSafeArea(.all, edges: .all)//忽略安全区，这里可视为纯紫色的背影
    Rectangle().fill(Color.blue)//画一个矩形铺满安全区
    Circle().fill(Color.orange)//在矩形上面画一个圆
    Text("ZStack").font(.title)//在圆的中间写上字
}

我们常常使用ZStack设置一个背景颜色（渐变色）或者背景图片等，通常配合所有的布局视图使用达到我们想要的效果。

可以用 zIndex 调整 ZStack 中视图的顺序，zIndex 越大的视图会被放在越上面zIndex 可以是负数，如果不标注的话 zIndex 为 0

ZStack {
    Text("ZStack").font(.title).zIndex(2)
    Circle().fill(Color.orange).zIndex(1)
    Rectangle().fill(Color.blue).zIndex(0)
}

可以看到代码顺序不一样但是效果却和上面的视图一样。

四、Spacer() 占据剩余的空间

一种灵活的空间，沿其包含的堆栈布局的长轴展开，如果不包含在堆栈中，则在两个轴上展开，下面的代码会在屏幕4边的中间显示：上、下、左、右。

初始化参数：minLength: CGFloat? = nil 最小长度

ZStack {
    HStack {
        Text("左").font(.largeTitle)
        Spacer()//将会把左右的中间用空白填满
        Text("右").font(.largeTitle)
    }
    VStack {
        Text("上").font(.largeTitle)
        Spacer()//将会把上下的中间用空白填满
        Text("下").font(.largeTitle)
    }
}

Spacer 对 Stack 来说和其他子视图一样，Spacer 上也可以设置 layoutPriority但是这会导致其他视图都消失....

也可以使用.frame修改器控制其大小做微调处理。 

SwiftUI实战：一个简单的天气显示界面：http://www.55mx.com/ios/110.html 对本文知识运用的综合案例。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/108