我们将创建一个WeSplit项目

1.WeSplit：项目简介

创建
1.启动Xcode
2.创建新的Xcode项目
3.选择iOS和Single View App
4.选择SwiftUI构建用户界面

2.SwiftUI基本结构

新建项目的结构

• App.swift 包含应用程序中启动一个窗口的代码。
• ContentView.swift包含您程序的初始用户界面（UI），并且我们将在该项目中完成所有工作。
• Assets.xcassets是资源目录–您要在应用程序中使用的图片的集合。您还可以在此处添加颜色，以及应用程序图标，iMessage贴纸等。
• Info.plist是一个特殊值的集合，这些特殊值描述了系统如何运行您的应用程序-它是哪个版本，您支持的设备方向等等。不是代码，但仍然很重要的事情。
• 预览内容是一个黄色的组，其中包含Preview Assets.xcassets –这是另一个资产目录，这一次专门针对例如在设计用户界面时要使用的图像，以使您了解它们在外观时的外观该程序正在运行。

工作从ContentView.swift进行，
var body: some View中some关键字增加了一个重要的限制：它必须始终返回view类型的视图

3.创建表格

SwiftUI提供了专用的视图类型，称为Form。
添加10个以上的内容时，SwiftUI需要将其分组，使用Group。

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")
    }
}

4.添加导航栏

var body: some View {
    NavigationView {
        Form {
            Section {
                Text("Hello World")
            }
        }
        .navigationBarTitle(Text("SwiftUI"))
        .navigationBarTitleDisplayMode(.inline) //如果不想使用大标题，可以使用inline
    }
}

5.修改程序状态

“视图是它们状态的函数“。
用户界面由程序状态决定，例如，文本中输入姓名后才能点击继续。
这与之前的方案有很大不同，用户界面由一系列事件决定。事件意味着很难存储应用程序的状态。

struct ContentView: View {
    @State var tapCount = 0

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

@State允许我们解决结构体的局限性。结构体无法更改属性值。但是@State由SwiftUI单独将其存储在可以修改的位置。
为什么不使用类保存状态？
使用类允许我们自由修改它们，但是随着学习，你会发现SwiftUI经常销毁并重新创建结构体，因此使用小而简单的结构体对性能至关重要。

@State专为存储在一个视图中的简单属性而设计。因此，Apple建议我们private向这些属性添加访问控制，例如：@State private var tapCount = 0。

6.状态绑定到View

双向绑定：我们绑定文本字段，以便它显示属性的值，但是我们也绑定它，以便对文本字段的任何更改也可以更新属性。

struct ContentView: View {
    @State private var name = ""

    var body: some View {
        Form {
            TextField("Enter your name", text: $name)
            Text("Hello World")
        }
    }
}

在属性前加入$，这将告诉Swift读取该属性的值，同时发生更改时将其写回。

7.循环创建视图

SwiftUI为循环遍历并创建视图提供了专用的视图类型ForEach

    var body: some View {
        Form {
            ForEach(0 ..< 12) {
                Text("num is \($0)")
            }
        }
    }

在Picker中使用ForEach

struct ContentView: View {

    let students = ["Harry", "Hermione", "Ron"]
    @State private var selectedStudent = 0
    
    var body: some View {
        VStack {
            Picker("Select your student", selection: $selectedStudent) {
                ForEach(students.indices) {
                    Text(self.students[$0])
                }
            }
            Text("You chose: Student # \(students[selectedStudent])")
        }
    }
}