SwiftUI：视图组合的代码重用

Question

使用 SwiftUI 开发我发现很难一起重用代码组合视图。我将向您展示一个简单的示例：假设我们的应用中有一个带有特定 UI 的文本字段。我们将此文本字段称为MyTextField。用户界面可能是：

代码如下：

struct MyTextField: View {
    @Binding var text: String
    var label: String

    var body: some View {
        VStack {
            HStack {
                Text(label)
                Spacer()
            }
            TextField("", text: $text) //here we have a simple TextField
            Divider()
        }
        .padding()
    }
}

现在，假设我们想要另一个具有相同 UI 的文本字段，但要在安全上下文中使用。此文本字段称为MySecureTextField。在这种情况下，我应该使用SecureField 而不是TextField，但显然我不想以这种方式创建一个全新的视图：

struct MySecureTextField: View {
    @Binding var text: String
    var label: String

    var body: some View {
        VStack {
            HStack {
                Text(label)
                Spacer()
            }
            SecureField("", text: $text) //this time we have a SecureField here
            Divider()
        }
        .padding()
    }
}

我该如何设计这样的情况？我尝试了几种方法，但似乎没有一个是正确的：

1 - 第一次尝试 拥有一种将实际文本字段作为参数的容器视图：

struct TextFieldContainer<ActualTextField>: View where ActualTextField: View {
    private let actualTextField: () -> ActualTextField
    var label: String

    init(label: String, @ViewBuilder actualTextField: @escaping () -> ActualTextField) {
        self.label = label
        self.actualTextField = actualTextField
    }

    var body: some View {
        VStack {
            HStack {
                Text(label)
                Spacer()
            }
            actualTextField()
            Divider()
        }
        .padding()
    }
}

我可以这样使用TextFieldContainer：

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        TextFieldContainer(label: "Label") {
            SecureField("", text: self.$text)
        }
    }
}

我不喜欢这个解决方案：我不想指定实际的文本字段，它应该隐含在视图本身中（MyTextField 或MySecureTextField）。通过这种方式，我什至可以在容器中注入任何类型的视图，而不仅仅是文本字段。

2 - 第二次尝试 拥有一个私有容器和两个在内部使用该容器的公共视图：

private struct TextFieldContainer<ActualTextField>: View where ActualTextField: View {
    //...
    //the same implementation as above
    //...
}

struct MyTextField: View {
    @Binding var text: String //duplicated code (see MySecureTextField)
    let label: String //duplicated code (see MySecureTextField)

    var body: some View {
        TextFieldContainer(label: label) {
            TextField("", text: self.$text)
        }
    }
}

struct MySecureTextField: View {
    @Binding var text: String //duplicated code (see MyTextField)
    let label: String //duplicated code (see MyTextField)

    var body: some View {
        TextFieldContainer(label: label) {
            SecureField("", text: self.$text)
        }
    }
}

并以这种方式使用它们：

struct ContentView: View {
    @State private var text = ""
    @State private var text2 = ""

    var body: some View {
        VStack {
            MyTextField(text: $text, label: "Label")
            MySecureTextField(text: $text2, label: "Secure textfield")
        }
    }
}

我并不是真的不喜欢这个解决方案，但是属性上有一些代码重复。如果有很多属性，就会有很多代码重复。另外，如果我更改了TextFieldContainer 上的某些属性，我应该更改所有视图，因此可能需要更改很多结构（MyTextField、MySecureTextField、MyEmailTextField、MyBlaBlaTextField 等等）。

3 - 我的最后一次尝试 使用与上述第二次尝试相同的方法，但以这种方式使用AnyView：

struct MySecureTextField: View {
    private let content: AnyView

    init(text: Binding<String>, label: String) {
        content = AnyView(TextFieldContainer(label: label) {
            SecureField("", text: text)
        })
    }

    var body: some View {
        content
    }
}

struct MyTextField: View {
    private let content: AnyView

    init(text: Binding<String>, label: String) {
        content = AnyView(TextFieldContainer(label: label) {
            TextField("", text: text)
        })
    }

    var body: some View {
        content
    }
}

这与第二次尝试没有什么不同，我的直觉是我错过了执行这项常见任务的正确方法（SwiftUI-y 方法）。您能否指出正确的“设计模式”或改进我描述的解决方案之一？对不起，很长的问题。

Answer 1

你可以使用简单的 if！

struct MyTextField: View {
    @Binding var text: String
    var label: String
    var secure: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text(label)
                Spacer()
            }

            if secure {
                SecureField("", text: $text)
            } else {
                TextField("", text: $text)
            }

            Divider()
        }
        .padding()
    }
}

用法：

MyTextField(text: $text, label: "Label") // unsecure
MyTextField(text: $text, label: "Label", secure: true) // secure

Answer 2

您的第一次尝试是正确的方法，但不是让调用者提供文本字段，而是为不同的字段类型添加静态方法：

struct TextFieldContainer<FieldView>: View where FieldView: View {

    var label: String

    var body: some View {
        VStack {
            HStack {
                Text(label)
                Spacer()
            }
            fieldView
            Divider()
        }
        .padding()
    }

    fileprivate init(label: String, fieldView: FieldView) {
        self.label = label
        self.fieldView = fieldView
    }

    private let fieldView: FieldView
}

extension TextFieldContainer where FieldView == TextField<Text> {
    static func plain(label: String, text: Binding<String>) -> some View {
        return Self(label: label, fieldView: TextField("", text: text))
    }
}

extension TextFieldContainer where FieldView == SecureField<Text> {
    static func secure(label: String, text: Binding<String>) -> some View {
        return Self(label: label, fieldView: SecureField("", text: text))
    }
}

使用示例：

struct ContentView: View {
    @State private var text = ""

    var body: some View {
        VStack {
            TextFieldContainer.plain(label: "Label", text: $text)
            TextFieldContainer.secure(label: "Label", text: $text)
        }
    }
}