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

Posted

技术标签:

【中文标题】如何在 SwiftUI 中添加自定义容器视图【英文标题】:How can I add a custom container view in 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?. 【参考方案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

【讨论】:

只定义一个像let content: () -&gt; 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()
    

【讨论】:

以上是关于如何在 SwiftUI 中添加自定义容器视图的主要内容,如果未能解决你的问题,请参考以下文章

导航时如何在 SwiftUI 中使用自定义视图转换?

在 SwiftUI 的自定义视图中访问图像的修饰符

SwiftUI - 在视图中包装 Button,以创建自定义按钮

如何在 SwiftUI 视图中使用自定义 UI 控件,例如 Button?

SwiftUI - 如何在文本视图中更改自定义 SF 符号的颜色?

如何在 swiftui 中添加自定义字体?