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

Question

我想知道在SwiftUI中是否可以创建自定义的容器视图。我知道可以创建自定义的内容视图，例如Text（），但不确定是否可以复制类似于HStack { }的功能。

类似于下面的内容：

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

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

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

- dustinnewbold

---

可能有帮助：什么使SwiftUI的DSL成为可能？。 - Martin R

Answer 1

SwiftUI使用ViewBuilder和@functionBuilder实现此功能。

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

另请参阅

• https://forums.swift.org/t/function-builders/25167（英文）
• https://github.com/apple/swift-evolution/pull/1046（英文）

- Ugo Arangino

---

仅仅定义一个属性 let content: () -> Content 而不是使用自定义的 init，这样做有意义吗？ - Lubiluk

你可以这样做。但是那只是一个返回视图的任意函数，而不是像 HStack 中的 ViewBuilder。 - Ugo Arangino

你好，我不明白如何像HGrid一样使用你的示例创建自定义容器？如何在每个添加的组件之间添加间距？你将如何修改builder()中所得到的内容？ - Denis Vert

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

- Paul B