通过这个项目我们将讨论一些深层次的问题，完成本项目，你会对SwiftUI有透彻的理解。

1.SwiftUI的view为什么是struct?

UIkit时使用类而不是结构体构造视图，而SwiftUI使用struct。

1.性能因素，结构体比类更简单,更快。
UIkit时，UIView是类，他有很多属性方法，子类继承了它的所有。
在SwiftUI中，使用结构体创建view的速度很快，它的大小取决于你给它多少属性。
2.除了性能外，类可以自由更改属性值，而结构体使我们以一种干净的方式隔绝状态，SwiftUI知道什么时候它会更改来更新UI。
SwiftUI让我们以更具功能性的方式来设计，视图变得简单，以惰性的方式数据转换为UI，而不是无法控制的智能方式。

2.main SwiftUI view的后面是什么?

当我们创建项目后，会得到一串代码Hello world的Text，我们给它加一个背景。

var body: some View {
    Text("Hello World")
       .background(Color.red)
}

它是这样的，

效果图

我们发现文本后有一大片的空白，在以前的UIKit时我们可以更改它，但在SwiftUI中你不可以这样做。

你要有另一种观念，view后没有任何东西，你所看到的，就是你拥有的。不要尝试通过SwiftUI意外的方式来操作。
所以我们如何将Text的背景充满这个屏幕。

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)

我们通过修改Text的frame，将maxWidth和maxHeight设为infinity，它会将frame变为infinity（可能的最大值）。但你会发现还在安全区域内，你可以使用edgesIgnoringSafeArea。

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)

3.修饰符顺序很重要！

var body: some View {
        Button("Hello World") {
            print(type(of: self.body))
        }
        .background(Color.red)
        .frame(width: 200, height: 200)
    }

我们通过type(of:)打印出Button的类型，ModifiedContent<ModifiedContent<Button<Text>, _BackgroundModifier<Color>>, _FrameLayout>

你会发现：

• 每次修改view,SwiftUI会使用泛型ModifiedContent<OurThing, OurModifier>来修改。
• 使用多次会叠加起来。

在每个ModifiedContent类型里，都有一个要转化的视图和实际修改，而不是直接修改改视图。
所以修饰符顺序很重要。
修改背景不用修改frame，并不会去重绘。
使用修饰符的一个问题是，多次使用相同效果，每个修饰符会简单的添加的以前的内容中。
例如，SwiftUI为我们提供了padding()修饰符。

Text("Hello World")
    .padding()
    .background(Color.red)
    .padding()
    .background(Color.blue)
    .padding()
    .background(Color.green)
    .padding()
    .background(Color.yellow)

这样会创建一个多个边框的背景。

4.为什么用some View类型？

5.条件修饰符

满足特定条件下才适用的修饰符，在SwiftUI中最简单的方法是三元运算符。

struct ContentView: View {
    @State private var useRedText = false

    var body: some View {
        Button("Hello World") {
            // flip the Boolean between true and false
            self.useRedText.toggle()            
        }
        .foregroundColor(useRedText ? .red : .blue)
    }
}

在某些情况下，也可以使用if else。

6.环境修饰符

如果想将修改器应用于多个视图，例如在VStack中有四个文本视图，将修饰符应用于VStack，这被称为环境修改器。

VStack {
    Text("Gryffindor")
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.font(.title)

VStack {
    Text("Gryffindor")
        .blur(radius: 0)
    Text("Hufflepuff")
    Text("Ravenclaw")
    Text("Slytherin")
}
.blur(radius: 5)

像这个不会起作用，它是常规修饰符。
哪些是环境修饰符，需要你自己去试验一下。

7.视图作为属性

视图作为属性可以避免重复。

struct ContentView: View {
        
    let button = Button(action: {
    }, label: {
        Text("Button")
    })
    
    var body: some View {
        VStack {
            button
                .background(Color.red)
        }
    }
}

Swift不允许创建引用其它存储属性的存储属性，但是可以创建计算属性。

var motto1: some View { Text("Draco dormiens") }

8.视图分解

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            Text("First")
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
                .clipShape(Capsule())

            Text("Second")
                .font(.largeTitle)
                .padding()
                .foregroundColor(.white)
                .background(Color.blue)
                .clipShape(Capsule())
        }
    }
}

视图中有两个相同的文本视图，然后将他们包装在新的自定义视图中。

struct CapsuleText: View {
    var text: String

    var body: some View {
        Text(text)
            .font(.largeTitle)
            .padding()
            .foregroundColor(.white)
            .background(Color.blue)
            .clipShape(Capsule())
    }
}

你可以在原始视图中使用

struct ContentView: View {
    var body: some View {
        VStack(spacing: 10) {
            CapsuleText(text: "First")
            CapsuleText(text: "Second")
        }
    }
}

9.自定义修饰符

通过modifier()修饰符来使用，我们创建一个自定义ViewModifier结构，

struct Title: ViewModifier {
    func body(content: Content) -> some View {
        content
            .font(.largeTitle)
            .foregroundColor(.white)
            .padding()
            .background(Color.blue)
            .clipShape(RoundedRectangle(cornerRadius: 10))
    }
}

Text("Hello World")
    .modifier(Title())

将自定义修饰符，放在View的扩展上，是个不错的主意。

extension View {
    func titleStyle() -> some View {
        self.modifier(Title())
    }
}

Text("Hello World")
    .titleStyle()

ViewModifier还可以根据需要创建新的视图，我们可以添加视图，然后组合成新视图返回。

struct Watermark: ViewModifier {
    var text: String

    func body(content: Content) -> some View {
        ZStack(alignment: .bottomTrailing) {
            content
            Text(text)
                .font(.caption)
                .foregroundColor(.white)
                .padding(5)
                .background(Color.black)
        }
    }
}

extension View {
    func watermarked(with text: String) -> some View {
        self.modifier(Watermark(text: text))
    }
}

我们可以在任何地方添加水印。

Color.blue
    .frame(width: 300, height: 200)
    .watermarked(with: "Hacking with Swift")

10.自定义容器

自定义一个可填充网格类型的堆栈视图。

struct GridStack<Content: View>: View {
    let rows: Int
    let columns: Int
    let content: (Int, Int) -> Content
    
    init(rows: Int, columns: Int, @ViewBuilder content: @escaping (Int, Int) -> Content) {
        self.rows = rows
        self.columns = columns
        self.content = content
    }

    var body: some View {
        VStack {
            ForEach(0..<rows, id: \.self) { row in
                HStack {
                    ForEach(0..<self.columns, id: \.self) { column in
                        self.content(row, column)
                    }
                }
            }
        }
    }
}

第一行–struct GridStack<Content: View>: View使用Swift的一个更高级的功能，称为泛型（generics），在这种情况下，这意味着“您可以提供所需的任何种类的内容，但是无论它是什么，都必须符合View协议。”同时 GridStack本身也符合View协议。

var body: some View {
        GridStack(rows: 2, columns: 2, content: { (row, col) in
            Image(systemName: "\(row * 4 + col).circle")
            Text("R\(row) C\(col)")
        })
    }

SwiftUI的一种功能（ViewBuilder），该功能允许我们发送多个视图并将其形成隐式堆栈。

多数情况下，只是将参数直接复制到结构的属性中，但请注意该@ViewBuilder属性在那里。您还将看到该@escaping属性，该属性使我们可以存储闭包，以备后用。

这样GridStack内加不加stack都可以了，随你。