1.使用stacks排列View

VStack(spacing: 20) {
    Text("Hello World")
    Text("This is inside a stack")
}

Spacer()填满屏幕剩余空间

VStack {
    Text("First")
    Text("Second")
    Text("Third")
    Spacer()
}

2.Color and frame

给整个区域填满背景

ZStack {
    Text("Your content")
}
.background(Color.red)

这只会给textView填满背景。
你可以这样做

ZStack {
        Color.red
        Text("Your content")
    }

因为Color.red 本身就是一个视图，还有其它的颜色，如Color.primary,Color. secondary,
或者使用rgb来创建,

Color(red: 1, green: 0.8, blue: 0)

如果你想填满整个屏幕,

ZStack {
    Color.red.edgesIgnoringSafeArea(.all)
    Text("Your content")
}

3.渐变

SwiftUI提供了三种渐变

• 线性渐变
• 径向渐变
• 角度渐变

LinearGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), startPoint: .top, endPoint: .bottom)
            
            RadialGradient(gradient: Gradient(colors: [.blue, .black]), center: .center, startRadius: 20, endRadius: 200)
            
            AngularGradient(gradient: Gradient(colors: [.red, .yellow, .green, .blue, .purple, .red]), center: .center)

4.Button and Image

一个简单的button

Button("Tap me!") {
    print("Button was tapped")
}

可自定义View的button

Button(action: {
                print("Button was tapped")
            }, label: {
                HStack(spacing: 10) {
                    Image(systemName: "pencil")
                        .renderingMode(.original)
                    Text("Edit")
                }
            })

使用renderingMode(.original)可以使用原始图像，而不使用着色的图像。

5.alert

    @State private var showingAlert = false
    
    var body: some View {
        Button("show alert") {
            showingAlert = true
        }
        .alert(isPresented: $showingAlert, content: {
            Alert(title: Text("hello"), message: Text("world"), dismissButton: Alert.Button.default(Text("OK")))
        })
    }

alert通过showingAlert 双向绑定。

alert写在什么位置并不重要。