SwiftUI中能否为.numberPad类型TextField添加.submitLabel()？

截至iOS 17及后续版本，SwiftUI原生的.numberPad键盘类型仍然不支持.submitLabel()修饰符——系统数字键盘的布局里没有预留提交按钮的位置，所以即使添加该修饰符也不会显示效果。

以下是几种可行的替代方案：

方案1：添加自定义提交按钮 #

这是最简单直接的方式，在TextField旁或下方添加独立按钮手动触发提交逻辑：

@State private var placeholder = ""
@FocusState private var isInputFocused: Bool

var body: some View {
    VStack(spacing: 16) {
        TextField("输入数字", text: $placeholder)
            .keyboardType(.numberPad)
            .focused($isInputFocused)
            .textFieldStyle(.roundedBorder)
        
        Button("下一步") {
            // 这里写入你的提交逻辑
            isInputFocused = false // 收起键盘
        }
        .disabled(placeholder.isEmpty) // 可选：输入为空时禁用按钮
        .buttonStyle(.borderedProminent)
    }
    .padding()
}

方案2：用UIKit包装添加工具栏按钮 #

通过UIViewRepresentable包装UITextField，给数字键盘添加带提交按钮的工具栏，更贴近原生键盘体验：

struct NumberPadWithSubmitTextField: UIViewRepresentable {
    @Binding var text: String
    let placeholder: String
    let onSubmit: () -> Void
    
    func makeUIView(context: Context) -> UITextField {
        let textField = UITextField()
        textField.placeholder = placeholder
        textField.keyboardType = .numberPad
        textField.delegate = context.coordinator
        
        // 创建顶部工具栏
        let toolbar = UIToolbar(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 44))
        let flexSpace = UIBarButtonItem(barButtonSystemItem: .flexibleSpace, target: nil, action: nil)
        let submitBtn = UIBarButtonItem(title: "下一步", style: .done, target: context.coordinator, action: #selector(Coordinator.handleSubmit))
        toolbar.items = [flexSpace, submitBtn]
        
        textField.inputAccessoryView = toolbar
        return textField
    }
    
    func updateUIView(_ uiView: UITextField, context: Context) {
        uiView.text = text
    }
    
    func makeCoordinator() -> Coordinator {
        Coordinator(parent: self)
    }
    
    class Coordinator: NSObject, UITextFieldDelegate {
        let parent: NumberPadWithSubmitTextField
        
        init(parent: NumberPadWithSubmitTextField) {
            self.parent = parent
        }
        
        func textFieldDidChangeSelection(_ textField: UITextField) {
            parent.text = textField.text ?? ""
        }
        
        @objc func handleSubmit() {
            parent.onSubmit()
            textField.resignFirstResponder()
        }
    }
}

// 使用示例
struct ContentView: View {
    @State private var numberInput = ""
    
    var body: some View {
        NumberPadWithSubmitTextField(
            text: $numberInput,
            placeholder: "请输入数字",
            onSubmit: {
                print("提交内容：\(numberInput)")
            }
        )
        .padding()
        .frame(width: 200)
    }
}

方案3：完全自定义数字键盘 #

如果需要高度定制化，可以自己实现带提交按钮的数字键盘，替换系统键盘：

@State private var inputText = ""
@FocusState private var isFocused: Bool

var body: some View {
    VStack(spacing: 20) {
        // 自定义输入框（也可以用隐藏的TextField获取焦点）
        Text(inputText.isEmpty ? "请输入数字" : inputText)
            .frame(height: 44)
            .frame(maxWidth: .infinity)
            .border(Color.gray.opacity(0.3))
            .onTapGesture { isFocused = true }
        
        // 自定义数字键盘
        LazyVGrid(columns: Array(repeating: GridItem(), count: 3), spacing: 12) {
            ForEach(1...9, id: \.self) { num in
                Button("\(num)") { inputText += "\(num)" }
                    .font(.title)
                    .frame(height: 60)
                    .background(Color.gray.opacity(0.1))
                    .cornerRadius(8)
            }
            
            Button("") {} // 占位符
            Button("0") { inputText += "0" }
                .font(.title)
                .frame(height: 60)
                .background(Color.gray.opacity(0.1))
                .cornerRadius(8)
            
            Button("←") {
                if !inputText.isEmpty { inputText.removeLast() }
            }
            .font(.title)
            .frame(height: 60)
            .background(Color.gray.opacity(0.1))
            .cornerRadius(8)
        }
        
        Button("提交") {
            print("提交内容：\(inputText)")
            isFocused = false
        }
        .frame(height: 44)
        .frame(maxWidth: .infinity)
        .background(Color.blue)
        .foregroundColor(.white)
        .cornerRadius(8)
        .disabled(inputText.isEmpty)
    }
    .padding()
    .focused($isFocused)
    .ignoresSafeArea(.keyboard)
}

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