SwiftUI：视图拆分与组合

SwiftUI使我们可以将复杂的视图分解为较小的视图，而不会产生任何性能影响。这意味着我们可以将一个大视图拆分为多个小视图，SwiftUI会为我们重新组装它们。

例如，在此视图中，我们有一种特殊的样式来设置文本视图的样式——它们具有大字体，一些填充，前景色和背景色以及胶囊形状：

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

因为这两个文本视图除文本内容外相同，所以我们可以将它们包装在新的自定义视图CapsuleText中，如下所示：

struct CapsuleText: View {
    var text: String

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

然后，我们可以在原始视图中使用CapsuleText视图，如下所示：

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

当然，我们也可以在视图中存储一些修饰符，并在使用它们时自定义其他修饰符。例如，如果我们从CapsuleText中删除了.foregroundColor，则可以在创建该视图的实例时应用自定义颜色，如下所示：

VStack(spacing: 10) {
    CapsuleText(text: "First")
        .foregroundColor(.white)
    CapsuleText(text: "Second")
        .foregroundColor(.yellow)
}

译自View composition

Previous: 将视图作为属性	Hacking with iOS: SwiftUI Edition	Next: 自定义修饰符

赏我一个赞吧~~~