SwiftUI篇-3 排版布局layout

摘要
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则会占据剩余控件

            HStack{
                Text("北宋")
                Text("北宋")
                // 使用了Spacer则HStack会占据剩余的控件
                Spacer()
            }.background(Color.orange).padding(.bottom,10)
            
            HStack{
                Text("北宋")
                Text("北宋")
                // 没使用Spacer则HStack不会占据剩余的控件
                
            }.background(Color.orange)

image.png

源码下载