SwiftUI基础之布局控件Stack和padding

认识HStack、VStack、ZStack

在SwiftUI中的布局更加类似于UIStackView类，也可能当时UIStackView类的出现也是为了后面的SwiftUI所做的实验吧，而在SwiftUI上使用更加方便，也更加全能。

HStack：水平方向的布局
VStack：垂直方向的布局
ZStack：深度方向的布局

使用Stack

HStack

scss 复制代码

HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下：

我们可以发现这个是横向布局，并且HStack容器的大小是按照子控件怎么改变呢

sapce

scss 复制代码

HStack(spacing: 0) {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

这个时候子控件之间就没有间隔了。

alignment

我们看下特殊的例子，也就是子控件高度不一致的情况。

scss 复制代码

HStack(spacing: 0) {
    Text("TEST1 \n ")
        .background(.blue)
    Text("TEST1 \n \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
 }.background(.green)

展示如下：

我们会发现子控件都是默认垂直居中的，那么如果要居上或者下的话，就要用alignment参数,alignment是VerticalAlignment类型的，有三个值：

top
center
bottom

那我们测试下top

scss 复制代码

HStack(alignment: .top,spacing: 0) {
    Text("TEST1 \n ")
        .background(.blue)
    Text("TEST1 \n \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
 }.background(.green)

这个时候就会居上了:

这就是HStack的简单用法！

VStack

scss 复制代码

VStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下：

同样也可以用space取出间距，我这边就不做演示了，而alignment是HorizontalAlignment类型的，参数的值也包括3个：

leading 居左
center 居中
trailing 居右

ZStack

scss 复制代码

ZStack() {
    Text("TEST12345 \n \n")
        .background(.blue)
    Text("TEST123 \n")
        .background(.red)
    Text("TEST1")
        .background(.yellow)
}.background(.green)

展示如下：

我们可以看出来，子控件是垂直排列的，并且是居中的，在ZStack里面是没有sapce的，因为垂直方向的间距对我们没有意义。

alignment是Alignment的，我们可以使用枚举，也可以用Alignment的构造方法。

如果用枚举的话，有下面9个值：

center 水平和垂直方向都是居中
top 垂直方向居上，水平方向居中
bottom 垂直方向居下，水平方向居中
leading 水平方向居左，垂直方向居中
trailing 水平方向居右，垂直方向居中
topLeading 水平方向居左，垂直方向居上
topTrailing 水平方向居右，垂直方向居上
bottomLeading 水平方向居左，垂直方向居下
bottomTrailing 水平方向居右，垂直方向居下

如果用构造方法：

less 复制代码

Alignment(horizontal: HorizontalAlignment, vertical: VerticalAlignment)

分别设置水平和垂直方向的布局方式

复合使用

HStack、VStack、ZStack是可以嵌套使用的，如下：

scss 复制代码

VStack{
    HStack {
        Text("水平1")
            .background(.blue)
        Text("水平2")
            .background(.yellow)
        Text("水平3")
            .background(.gray)
     }
     ZStack {
         Text("TEST12345 \n \n")
             .background(.blue)
         Text("TEST123 \n")
             .background(.red)
         Text("TEST1")
             .background(.yellow)
      }.background(.green)
}.background(.pink)

展示如下：

认识padding

这个方法是用来设置内间距，我们可以看到，Stack容与子控件的内边距为0，所以用这个可以设置内边距。

scss 复制代码

HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}
 .padding(.all, 10.0)
 .background(.green)

展示如下：

这个padding不仅可以用在Stack上，还可以用在所有控件上，那么，我们用在Text上试试。

scss 复制代码

HStack {
     Text("TEST1")
        .padding(.all,10)
        .background(.blue)
     Text("TEST1")
        .padding(.all,10)
        .background(.red)
     Text("TEST1")
        .padding(.all,10)
        .background(.yellow)
}
 .padding(.all, 10.0)
 .background(.green)

可以发现Text都有了内边距

padding的方向和大小

padding不仅可以设置四个方向，也可以单独设置某一个方向，或某几个方向。

使用枚举：

all 所有方向
top 上
bottom 下
leading 左
trailing 右
horizontal 水平方向
vertical 垂直方向

使用构造方法：

less 复制代码

EdgeInsets(top: CGFloat, leading: CGFloat, bottom: CGFloat, trailing: CGFloat)

我们使用构造方法试下：

scss 复制代码

HStack {
     Text("TEST1")
        .background(.blue)
     Text("TEST1")
        .background(.red)
     Text("TEST1")
        .background(.yellow)
}
 .padding(EdgeInsets(top: 0, leading: 0, bottom: 0, trailing: 10))
 .background(.green)

展示如下：