如何在 SwiftUI 中添加自定义容器视图答案

【问题标题】：How can I add a custom container view in SwiftUI如何在 SwiftUI 中添加自定义容器视图
【发布时间】：2019-06-10 18:32:52
【问题描述】：

我很好奇您是否可以在 SwiftUI 中创建自定义容器视图。我知道您可以创建自定义内容视图，例如 Text()，但不确定您是否可以复制 HStack { } 的功能

类似于：

HGrid {
    Text("Lorem ipsum")
    Text("Lorem ipsum")
}

自定义容器视图（又名HGrid）会在每个添加的组件之间添加Spacer()。本质上，例如，将其转换为：

HStack {
    Text("Lorem ipsum")
    Spacer()
    Text("Lorem ipsum")
}

【问题讨论】：

可能有帮助：What enables SwiftUI's DSL?.

标签： swift swiftui xcode11 ios13

【解决方案1】：

SwiftUI 使用 ViewBuilder @functionBuilder 实现这一点

struct HGrid <Content: View>: View {
    init(@ViewBuilder builder: () -> Content) {
        let content = builder()
        ...
    }
}

另见

【讨论】：

只定义一个像let content: () -> Content 这样的属性而不是这个自定义初始化有意义吗？
你可以这样做。但它只是一个返回视图的任意函数，而不是 HStack 中的 ViewBuilder。
@UgoArangino 嗨，我不明白如何使用您的示例将自定义容器创建为 HGrid？如何在每个添加的组件之间添加垫片？你将如何修改你在 builder() 中得到的东西？

【解决方案2】：

如果我们尽量保持简单，只做一件事，可以提出两种选择：

import SwiftUI
// Via custom containers
struct HGrid<Content: View>: View {
    let C1: Content
    let C2: Content

    var body: some View {
        HStack {
            C1
            Spacer()
            C2
        }
    }
}
// Via View composition
struct HGridComposition: View {
    var text1: String
    var text2: String

    var body: some View {
        HStack {
            Text(text1)
            Spacer()
            Text(text2)
        }
    }
}


struct ContentView: View {
    var body: some View {
        VStack {
            Text("Composed from Views").font(.headline)
        HGrid(C1: Text("First"), C2: Text("Second"))
            Divider()
            Text("Composed from texts (String)").font(.headline)
        HGridComposition(text1: "Text One", text2: "Text Two")
        }
        .padding([.leading, .trailing])
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

【讨论】：