SwiftUI——组件摆放排序（VStack、HStack和ZStack）

SwiftUI中设计界面可以很简单的通过代码实现。方向上分为三个：VStack、HStack和ZStack。

 

• VStack：竖直方向排列组件，顺序和代码顺序一致。

VStack{
        Text("1")
        Text("2")
}

 

• HStack：水平方向排列组件，代码顺序从上到下表示在视图上是从左到右。

HStack{
        Text("1")
        Text("2")
}

 

• ZStack：垂直屏幕方向重叠组件，代码顺序越下面，显示的越靠外。

ZStack{
        Text("1")
        Text("2")
            .zIndex(1.0)
}

但是这一种方式有点特殊，在组件下面使用修饰符.zIndex()控制组件位置。

.zIndex()是控制覆盖顺序的。如果不使用该修饰符或者设置为0就是默认顺序：代码在越下面的，图像在越外面。如果设置了非0的数字的话，按照数字大的在外面的原则。

 

这三种还可以套用。