SwiftUI - 视图布局和演示

1 HStack, 将子视图横向 水平 排列。

创建文本 横向 展示

HStack (alignment: .center, spacing: 20){
        Text("Hello")
        Divider()
        Text("World")
      }

截屏2023-06-14 23.45.27.png

1.1 LazyHStack, 创建滑动列表, 横向 水平 展示, 排列成一条水平增长的线的视图。

ScrollView(.horizontal) {
    LazyHStack(alignment: .center, spacing: 20) {
        ForEach(1...100, id: \.self) {
            Text("Column \($0)")
        }
    }
}

截屏2023-06-14 23.49.31.png

2 VStack, 将其子级排列成一条垂直线的视图。

创建 纵向 竖直 可滚动列表

VStack (alignment: .center, spacing: 20){
          Text("Hello")
          Divider()
          Text("World")
      }

截屏2023-06-14 23.54.04.png

2.1 LazyVStack, 将其子项排列成一条垂直排列的视图，创建项目仅在需要时。

ScrollView(.vertical) {
          LazyVStack(alignment: .center, spacing: 20) {
              ForEach(1...100, id: \.self) {
                  Text("Column \($0)")
              }
          }
      }

截屏2023-06-14 23.56.41.png

3 ZStack, 重叠 覆盖 其子级的视图，使它们在两个轴上对齐。

ZStack {
        Text("Hello")
          .padding(10)
          .background(Color.red)
          .opacity(0.8)
        Text("World")
          .padding(20)
          .background(Color.red)
          .offset(x: 0, y: 40)
      }

截屏2023-06-14 23.58.36.png

4 混合排版

        Text("Hello world")
        Image(systemName: "clock")      

截屏2023-06-19 20.01.02.png