一、笔记

本篇文章记录一下100 Days of SwiftUI第16天的笔记内容

创建表单

// Form表单是文本和图像等静态控件的滚动列表，但也可以包括文本字段、切换开关、按钮等用户交互控件
var body: some View {
    Form {
        Text("Hello, world!")
    }
}

// 可以在表单中添加任意数量的内容，但如果您打算添加超过 10 个，SwiftUI 要求将内容分组以避免出现问题
Form {
    Group {
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
    }

    Group {
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
        Text("Hello, world!")
    }
}

// 如果希望表单在将项目拆分为块时看起来有所不同，则应该使用Section
Form {
    Section {
        Text("Hello, world!")
    }

    Section {
        Text("Hello, world!")
        Text("Hello, world!")
    }
}

添加导航栏

var body: some View {
    NavigationView {
    Form {
        Section {
            Text("Hello, world!")
        }
    }
    .navigationTitle("SwiftUI")
    .navigationBarTitleDisplayMode(.inline) // 小标题
}

修改程序状态

// @State为属性包装器
// ContentView是一个结构体，不能随意改变它的值，Swift要求更改结构体的方法时要加关键字muating
// 而Swift又不允许更改计算属性，muating var body: some View {}是不允许的
// SwiftUI提供了@State的特殊解决方案，更改属性的值
struct ContentView: View {
    @State private var tapCount = 0

    var body: some View {
        Button("Tap Count: \(tapCount)") {
            self.tapCount += 1
        }
    }
}

将状态绑定到用户界面控件

// $表示双向绑定，可以读取属性的值，也可以写入修改属性的值
// 对于TextField需要显示name，同时也需要在TextField修改时更新name
struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Your name is \(name)")
        }
    }
}

循环创建视图

// ForEach循环创建视图不会受到10个视图限制的影响
Form {
    ForEach(0..<100) { number in
        Text("Row \(number)")
    }
}
// 上述代码也可以简化为
Form {
    ForEach(0 ..< 100) {
        Text("Row \($0)")
    }
}

// 具体应用小示例
struct ContentView: View {
    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = "Harry"

    var body: some View {
        NavigationView {
            Form {
                Picker("Select your student", selection: $selectedStudent) {
                    ForEach(students, id: \.self) { // id: \.self，SwiftUI 需要能够唯一地识别屏幕上的每个视图，以便它可以检测到事物何时发生变化
                        Text($0)
                    }
                }
            }
        }
    }
}