如何创建可接收并传递TextField所有参数的SwiftUI自定义组件？

问题描述 #

我封装了一个带样式的SwiftUI自定义TextField组件TextInputSmall，原本仅支持String类型的@Binding。现在需要扩展它，使其同时支持Int、Double这类数值类型的绑定，即兼容TextField(text:)和TextField(value:formatter:)两种初始化方式，同时保留组件形式，无需将样式拆分为自定义修饰符。当前组件代码如下：

struct TextInputSmall: View {
  // Public Variables
  var accentColor = Color._orange
  @Binding var text: String
  
  // Private Variables
  @FocusState private var focused: Bool
  
  // Body
  var body: some View {
    TextField(
      "",
      text: $text
    )
    .font(...)
    .foregroundStyle(...)
    .accentColor(...)
    .focused($focused)
    .submitLabel(.done)
    .frame(...)
    .padding(...)
    .background(...)
  }
}

解决方案 #

方案一：重载初始化器 + AnyView封装 #

通过重载初始化方法，分别处理String绑定和数值绑定场景，将对应的TextField视图封装为AnyView后统一应用样式：

struct TextInputSmall: View {
    var accentColor = Color._orange
    @FocusState private var focused: Bool
    
    private let content: AnyView
    private let placeholder: String
    
    // String类型绑定初始化
    init(_ placeholder: String, text: Binding<String>) {
        self.placeholder = placeholder
        self.content = AnyView(
            TextField(placeholder, text: text)
        )
    }
    
    // 数值类型绑定初始化（支持所有Equatable数值类型）
    init<Value>(_ placeholder: String, value: Binding<Value>, formatter: Formatter) where Value: Equatable {
        self.placeholder = placeholder
        self.content = AnyView(
            TextField(placeholder, value: value, formatter: formatter)
        )
    }
    
    var body: some View {
        content
            .font(...) // 保留原有样式修饰符
            .foregroundStyle(...)
            .accentColor(accentColor)
            .focused($focused)
            .submitLabel(.done)
            .frame(...)
            .padding(...)
            .background(...)
    }
}

使用示例：

// 绑定String类型
@State private var username = ""
TextInputSmall("输入用户名", text: $username)

// 绑定Int类型
@State private var age = 25
let numberFormatter: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    return formatter
}()
TextInputSmall("输入年龄", value: $age, formatter: numberFormatter)

方案二：泛型 + 枚举区分绑定类型 #

通过泛型和枚举明确区分两种绑定类型，逻辑更清晰，便于后续扩展其他绑定场景：

// 枚举封装不同类型的绑定逻辑
enum TextFieldBinding<Value> {
    case text(Binding<String>)
    case value(Binding<Value>, Formatter)
}

struct TextInputSmall<Value>: View {
    var accentColor = Color._orange
    private let binding: TextFieldBinding<Value>
    private let placeholder: String
    @FocusState private var focused: Bool
    
    // String类型绑定初始化
    init(_ placeholder: String, text: Binding<String>) where Value == String {
        self.placeholder = placeholder
        self.binding = .text(text)
    }
    
    // 数值类型绑定初始化
    init(_ placeholder: String, value: Binding<Value>, formatter: Formatter) {
        self.placeholder = placeholder
        self.binding = .value(value, formatter)
    }
    
    var body: some View {
        Group {
            switch binding {
            case .text(let textBinding):
                TextField(placeholder, text: textBinding)
            case .value(let valueBinding, let formatter):
                TextField(placeholder, value: valueBinding, formatter: formatter)
            }
        }
        .font(...) // 保留原有样式修饰符
        .foregroundStyle(...)
        .accentColor(accentColor)
        .focused($focused)
        .submitLabel(.done)
        .frame(...)
        .padding(...)
        .background(...)
    }
}

使用示例与方案一完全一致，无需修改调用代码。

方案对比 #

• 方案一代码简洁、实现成本低，但AnyView会带来极轻微的性能开销（绝大多数UI场景下可忽略）。
• 方案二逻辑清晰、类型区分明确，后续扩展其他TextField初始化方式（如带prompt的版本）更方便，无额外性能开销。

内容的提问来源于stack exchange，提问作者Ilja