摘要
swiftUI提供的layout有：
ZStack、GeometryReader、HStack、LazyVGrid、LazyHStack、LazyHGrid、LazyVStack、VStack、Spacer、ScrollViewReader等

image.png

HStack 水平橫向布局容器，子view按順序水平排列

            HStack(alignment: .center, spacing: 10) {
                          Text("橫向布局 text1").padding(10)
                          Text("橫向布局 text1").padding(10)
                          
                      }.border(Color.blue, width: 1)

VStack 垂直縱向布局容器，子view按順序垂直排列

            VStack(alignment: .trailing, spacing: 10) {
                          Text("縱向布局 text1").padding(10)
                          Text("縱向布局 text1").padding(10)
                      }.border(Color.blue, width: 1)

ZStack 覆蓋布局容器，后面的子view會蓋住前面的子view

            ZStack(alignment: .center, content: {
                           Image("silversalmoncreek")
                            Text("覆蓋布局").foregroundColor(.red)
            })

GeometryReader 可以獲取到父view分配給它的size

            GeometryReader { geometry in
                Text("GeometryReader , width:\(geometry.size.width) height:\(geometry.size.height)")
            }

image.png

LazyHStack、LazyVStack：一行或一列顯示完子view，需要顯示時才渲染

            Section(header: Text("水平一行顯示完，需要顯示時才渲染")) {
                LazyHStack(alignment: .top, spacing: 10) {
                       ForEach(1...5, id: \.self) {
                           Text("Column \($0)")
                       }
                   }
            }
            Section(header: Text("垂直一列顯示完，需要顯示時才渲染")) {
                LazyVStack(alignment: .leading) {
                    ForEach(1...5, id: \.self) {
                        Text("Row \($0)")
                    }
                }
            }

image.png

Space 使用了Spacer則會占據(jù)剩余控件

            HStack{
                Text("北宋")
                Text("北宋")
                // 使用了Spacer則HStack會占據(jù)剩余的控件
                Spacer()
            }.background(Color.orange).padding(.bottom,10)
            
            HStack{
                Text("北宋")
                Text("北宋")
                // 沒使用Spacer則HStack不會占據(jù)剩余的控件
                
            }.background(Color.orange)

image.png

源碼下載