1、VStack（垂直布局）（對應(yīng)還有LazyVStack懶加載垂直布局晴裹，iOS 14.0才可使用）
VStack 會一次性渲染所有視圖怕轿，無論它們是在屏幕上還是屏幕外肄满。 當(dāng)您有少量子視圖或不希望“懶加載”延遲渲染時，請使用常規(guī) VStack智政。
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(
alignment: .leading,
spacing: 10
) {
ForEach(
0...10,
id: \.self
) {
Text("Item \($0)")
.background(Color.blue)
}
}
}}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
alignment：對接方式认罩，左/中/右
extension HorizontalAlignment {
/// A guide marking the leading edge of the view.
public static let leading: HorizontalAlignment
/// A guide marking the horizontal center of the view.
public static let center: HorizontalAlignment
/// A guide marking the trailing edge of the view.
public static let trailing: HorizontalAlignment
}
spacing：間距
截屏2021-12-26 23.32.42.png
2、HStack（水平布局）（對應(yīng)還有LazyHStack懶加載水平布局续捂，iOS 14.0才可使用）
HStack 會一次性渲染所有視圖垦垂，無論它們是在屏幕上還是屏幕外。 當(dāng)您有少量子視圖或不希望“懶加載”延遲渲染時牙瓢，請使用常規(guī) HStack劫拗。
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
ForEach(
1...5,
id: \.self
) {
Text("Item \($0)")
}
}
}
截屏2021-12-26 23.16.05.png
3、ZStack（層疊布局）
ZStack 為每個連續(xù)的子視圖分配比前一個更高的 z 軸值矾克，這意味著后面的子視圖出現(xiàn)在前面的子視圖的“頂部”页慷。
下面的示例創(chuàng)建一個 100 x 100 點的 ZStack 矩形視圖，填充六種顏色之一胁附，將每個連續(xù)的子視圖偏移 10 點酒繁，使它們不會完全重疊：
let colors: [Color] =
[.red, .orange, .yellow, .green, .blue, .purple]
var body: some View {
ZStack {
ForEach(0..<colors.count) {
Rectangle()
.fill(colors[$0])
.frame(width: 100, height: 100)
.offset(x: CGFloat($0) * 10.0,
y: CGFloat($0) * 10.0)
}
}
}
截屏2021-12-26 23.19.59.png
import SwiftUI
struct ContentView: View {
var body: some View {
ZStack {
Rectangle()
.fill(Color.red)
.frame(width:300, height:300)
.zIndex(0)
Rectangle()
.fill(Color.blue)
.frame(width:200, height:200)
Rectangle()
.fill(Color.yellow)
.frame(width:100, height:100)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-26 23.27.56.png
zIndex：層疊優(yōu)先級，從大到小1-0
4控妻、Spacer （填充布局）
一個靈活的填充空間布局州袒，垂直/水平填充，默認(rèn)填充滿剩余所有空間饼暑，也可以指定填充的寬度或高度
-
4-1 未填充前的水平布局
截屏2021-12-27 23.26.59.png
- 4-2 填充后的水平布局（垂直布局一樣的效果）
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
Text("Item 1")
.background(Color.purple)
Spacer()
Text("Item 2")
.background(Color.purple)
Spacer()
Text("Item 3")
.background(Color.purple)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.28.33.png
- 4-3 填充后的水平布局（垂直布局一樣的效果）
import SwiftUI
struct ContentView: View {
var body: some View {
HStack(
alignment: .top,
spacing: 10
) {
Spacer()
Text("Item 1")
.background(Color.purple)
Spacer()
Text("Item 2")
.background(Color.purple)
Spacer()
Text("Item 3")
.background(Color.purple)
Spacer()
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.28.45.png
minLength：設(shè)置填充最小寬度/高度
5稳析、ScrollView
滾動視圖在可滾動內(nèi)容區(qū)域內(nèi)顯示其內(nèi)容。 當(dāng)用戶執(zhí)行適合平臺的滾動手勢時弓叛，滾動視圖會調(diào)整底層內(nèi)容的可見部分彰居。 ScrollView 可以水平、垂直或同時滾動撰筷，但不提供縮放功能陈惰。（一般配合HStack、VStack等布局使用）
在以下示例中毕籽，ScrollView 允許用戶滾動包含 100 個文本視圖的 VStack抬闯。 列表后的圖像顯示了右側(cè)滾動視圖的臨時可見滾動條； 您可以使用 ScrollView 初始值設(shè)定項的 showsIndicators 參數(shù)禁用它关筒。
var body: some View {
ScrollView {
VStack(alignment: .leading) {
ForEach(0..<100) {
Text("Row \($0)")
}
}
}
}
截屏2021-12-27 23.39.15.png
Axis.set: 設(shè)置滾動方向/水平/垂直
showsIndicators：是否顯示滾動指示器
6溶握、GeometryReader（相對布局）
一個容器視圖，將其內(nèi)容定義為它自己的大小和坐標(biāo)空間的函數(shù)蒸播∷埽可以獲取到視圖的大小和坐標(biāo)
import SwiftUI
struct ContentView : View {
var body: some View {
VStack {
Text("Hello There!").background(Color.orange)
MyRectangle()
}.frame(width: 150, height: 100).border(Color.yellow)
}
}
struct MyRectangle: View {
var body: some View {
GeometryReader { geometry in
Rectangle()
.path(in: CGRect(x: geometry.size.width + 5,
y: 0,
width: geometry.size.width/2,
height: geometry.size.height))
.fill(Color.pink)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-27 23.54.37.png
7萍肆、ViewBuilder
通常使用 ViewBuilder 作為子視圖生成閉包參數(shù)的參數(shù)屬性，允許這些閉包提供多個子視圖胀屿。 例如塘揣，以下CustomView接受一個通過視圖構(gòu)建器生成一個或多個視圖的閉包。(通常用來自定義View宿崭、dialog亲铡、toast等)
import SwiftUI
struct ContentView : View {
var body: some View {
CustomView{
Text("Itme 1")
Text("Itme 2")
Text("Itme 3")
}
}
}
struct CustomView<Content>:View where Content:View {
private let content:Content
init(@ViewBuilder content:() -> Content) {
self.content = content()
}
var body: some View{
VStack{
content
.padding()
}
.foregroundColor(.orange)
.background(Color.pink)
.font(.title)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
截屏2021-12-28 00.08.06.png
8、LazyVGrid （懶加載垂直網(wǎng)格布局）（iOS 14.0才可使用）
控件顯示到屏幕里才會加載（性能會有提升）
import SwiftUI
struct ContentView : View {
var body: some View {
let columns: [GridItem] =
Array(repeating: .init(.flexible(), spacing: 0), count: 4)
ScrollView {
LazyVGrid(columns: columns) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
.background(Color.blue)
}
}.font(.largeTitle)
}
.padding()
}
}
截屏2021-12-28 21.46.41.png
9葡兑、LazyHGrid （懶加載水平網(wǎng)格布局）（iOS 14.0才可使用）
控件顯示到屏幕里才會加載
import SwiftUI
struct ContentView : View {
var body: some View {
let rows: [GridItem] =
Array(repeating: .init(.fixed(50)), count: 2)
ScrollView(.horizontal) {
LazyHGrid(rows: rows, alignment: .top) {
ForEach((0...79), id: \.self) {
let codepoint = $0 + 0x1f600
let emoji = String(Character(UnicodeScalar(codepoint)!))
Text("\(emoji)")
.font(.largeTitle)
.background(Color.blue)
}
}
}
.padding()
}
}
截屏2021-12-28 21.45.07.png
