如何实现仅允许输入单个字符的SwiftUI TextField？

核心问题 #

你的代码存在以下几个关键问题：

• 子视图使用@State存储输入内容，错误地将状态管理权放在子视图，导致无法实现独立输入
• 三个输入框共用同一个状态变量，输入内容会同步到所有框，不符合独立输入需求
• 输入长度限制逻辑放在onEditingChanged回调中，该回调仅在编辑状态切换时触发，无法实时限制输入内容
• Preview未使用@State，无法预览状态变化效果

修复后的完整代码 #

import SwiftUI

// 子视图：负责单个输入框的样式与输入限制
struct RoundRectView : View {
    // 使用@Binding接收父视图传递的状态，让父视图统一管理输入内容
    @Binding var text : String
    private let maxLength = 1
    
    var body: some View {
        TextField("", text: $text)
            .padding()
            .kerning(-0.2)
            .bold()
            .frame(width: 68, height: 56)
            .keyboardType(.numberPad)
            .overlay(
                RoundedRectangle(cornerRadius: 21)
                    .stroke(lineWidth: 2)
            )
            // 实时监听文本变化，限制输入长度与内容
            .onChange(of: text) { newValue in
                // 只保留数字字符
                let filteredText = newValue.filter { $0.isNumber }
                // 限制最大长度为1
                if filteredText.count > maxLength {
                    text = String(filteredText.prefix(maxLength))
                } else {
                    text = filteredText
                }
            }
    }
}

// 父视图：管理三个独立的输入状态
struct NumberInputView: View {
    @State private var firstNumber = ""
    @State private var secondNumber = ""
    @State private var thirdNumber = ""
    
    var body: some View {
        HStack(spacing: 16) {
            RoundRectView(text: $firstNumber)
            RoundRectView(text: $secondNumber)
            RoundRectView(text: $thirdNumber)
        }
        .padding()
    }
}

// 预览修正：使用父视图预览，支持状态更新
struct NumberInputView_Previews: PreviewProvider {
    static var previews: some View {
        NumberInputView()
    }
}

优化说明 #

1. 状态管理修正：子视图通过@Binding绑定父视图的@State变量，确保每个输入框拥有独立的内容状态，互不干扰
2. 实时输入控制：通过onChange(of: text)回调实时过滤非数字字符，并限制输入长度，确保输入内容符合要求
3. Preview修复：使用包含状态的父视图进行预览，能够正确展示输入框的动态变化效果

额外体验优化（可选） #

如果需要实现输入完成后自动跳转到下一个输入框的功能，可以添加焦点管理逻辑：

// 扩展RoundRectView支持焦点绑定
struct RoundRectView : View {
    @Binding var text : String
    @FocusState.Binding var isFocused: Bool
    private let maxLength = 1
    
    var body: some View {
        TextField("", text: $text)
            .padding()
            .kerning(-0.2)
            .bold()
            .frame(width: 68, height: 56)
            .keyboardType(.numberPad)
            .overlay(
                RoundedRectangle(cornerRadius: 21)
                    .stroke(lineWidth: 2)
            )
            .focused($isFocused)
            .onChange(of: text) { newValue in
                let filteredText = newValue.filter { $0.isNumber }
                if filteredText.count > maxLength {
                    text = String(filteredText.prefix(maxLength))
                } else {
                    text = filteredText
                }
                // 输入完成后自动失去焦点，触发父视图的焦点切换
                if text.count == maxLength {
                    isFocused = false
                }
            }
    }
}

// 更新父视图的焦点管理逻辑
struct NumberInputView: View {
    @State private var firstNumber = ""
    @State private var secondNumber = ""
    @State private var thirdNumber = ""
    
    @FocusState private var focusedField: Field?
    enum Field { case first, second, third }
    
    var body: some View {
        HStack(spacing: 16) {
            RoundRectView(text: $firstNumber, isFocused: $focusedField, equals: .first)
            RoundRectView(text: $secondNumber, isFocused: $focusedField, equals: .second)
            RoundRectView(text: $thirdNumber, isFocused: $focusedField, equals: .third)
        }
        .padding()
        .onChange(of: focusedField) { current in
            switch current {
            case .first where firstNumber.count == 1:
                focusedField = .second
            case .second where secondNumber.count == 1:
                focusedField = .third
            default:
                break
            }
        }
        .onAppear {
            focusedField = .first
        }
    }
}

// 为RoundRectView添加焦点初始化扩展
extension RoundRectView {
    init(text: Binding<String>, isFocused: FocusState<Field?>.Binding, equals field: Field) {
        self._text = text
        self._isFocused = isFocused.projectedValue == field
    }
}

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