swift - 表单中的 SwiftUI 子视图

Question

我想了解是否有可能在 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（想象一下子视图被包裹在 aForm而不是VStackit 中）。

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

你能推荐任何其他方式来实现这种抽象，同时保持一个可用的表单吗？

提前喝彩

标签： swiftswiftuiswiftui-form

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