【问题标题】:SwiftUI subviews in forms表单中的 SwiftUI 子视图
【发布时间】:2021-01-05 19:51:50
【问题描述】:

我想了解是否有可能在 SwiftUI 中的表单中包含一个表单来帮助进行代码抽象。我将在下面举一个简单的例子,假设我们有最简单的形式

设置

struct TestForm: View {
    @State var title: String = ""
    @State var description: String = ""
    
    var body: some View {
        Form {
            Section {
                TextField("Name", text: $title)
                TextField("Description", text: $description)
            }
        }
    }
}

基本上看起来像这样

添加新表单

现在我想添加一个新的子表单,但我不希望它的逻辑使主表单视图复杂化。在这里你可以看到我已经将SubForm 添加为一个新视图及其所有依赖项(忽略状态变量,它们只是为了确保 swift 不会抱怨。实际上,子表单可以链接到它想要的任何状态到)

struct TestForm: View {
    @State var title: String = ""
    @State var description: String = ""
    @State var option: Int = 0
    
    func SubForm() -> some View {
        VStack {
            TextField("SubForm Name", text: $title)
            Picker(selection: $option, label: Text("Question Type")) {
                ForEach(Question.PayloadType.allCases, id: \.self) {
                    Text($0.rawValue)
                }
            }
        }
    }

    var body: some View {
        Form {
            Section {
                TextField("Name", text: $title)
                TextField("Description", text: $description)
            }
            
            SubForm()
        }
    }
    
    enum FormPicker: String, Codable, CaseIterable {
        case firstOption = "First Option"
        case secondOption = "Second Option"
    }
}

但现在表格看起来像这样:

如您所见,子表单本质上是在一个列表项中。这实际上会导致导航链接的可用性问题。

明显的问题是 Form 本质上是一个 List,而 List 不会扁平化 VStacks 甚至其他 Forms(想象一下子视图被包裹在 @987654332 @ 而不是 VStack 它是)。

但是,我真的很想保留 Form 提供的样式,但也想做这种逻辑分组。黄金标准如下所示:

您能否推荐任何其他方式来实现这种抽象,同时保持一个可用的表单?

提前干杯

【问题讨论】:

    标签: swift swiftui swiftui-form


    【解决方案1】:

    您可以将第二个表单添加为新的部分吗?这是你要找的吗?

    var body: some View {
            Form {
                Section {
                    TextField("Name", text: $title)
                    TextField("Description", text: $description)
                }
                
                Section {
                    TextField("SubForm Name", text: $title)
                    TextField("QuestionType", text: $description)
                }
            }
        }
    

    【讨论】:

      猜你喜欢
      • 2019-10-23
      • 2019-10-30
      • 1970-01-01
      • 2021-12-09
      • 1970-01-01
      • 2020-02-15
      • 2021-10-28
      • 1970-01-01
      • 2020-06-27
      相关资源
      最近更新 更多