SwiftUI自定义TextField内容无法更新始终为空问题求助

核心问题分析 #

1. onEditingChanged触发时机错误：这个闭包仅在编辑状态切换（比如开始输入/结束输入）时执行，而非用户输入内容变化时。你输入文字时它不会触发，所以print(text)和isFilled的更新完全没生效。
2. isFilled状态冗余且未同步：isFilled作为@State变量，没有和绑定的text联动，text变化时它不会自动更新，始终保持初始的false。
3. 占位符动画依赖错误状态：因为isFilled未正确更新，导致浮动占位符的动画逻辑完全失效。

修复步骤 #

1. 移除冗余的isFilled状态：用计算属性替代，直接从text推导状态，避免手动同步的麻烦。
2. 将输入监听移到正确位置：如果需要在text变化时执行操作（比如打印、校验），使用.onChange(of: text)修饰符，而非onEditingChanged。
3. 简化onEditingChanged逻辑：只保留编辑状态切换的动画处理即可。

修改后的完整代码 #

import SwiftUI

struct TextInputField: View {
    var title: String
    var prompt: String
    let validate: (String)->Bool
    var placeholder: String

    @Binding var text: String
    @State var isEditing: Bool = false
    @State var error: Bool = false

    // 用计算属性替代@State，直接从text推导填充状态
    private var isFilled: Bool { !text.isEmpty }

    var body: some View {
        ZStack(alignment: .leading) {
            Text(placeholder)
                .foregroundColor(text.isEmpty ? Color(.placeholderText) : .accentColor)
                .offset(x: 0, y: (!isEditing && !isFilled) ? 0 : -14)
                .padding()
                .font(UIConstraints.fontRegular(size: (isEditing && !isFilled) ? 12 : 16))

            TextField("", text: $text, onEditingChanged: { isEditing in
                withAnimation(.default) {
                    self.isEditing = isEditing
                }
            })
            // 监听text实时变化，执行打印、校验等操作
            .onChange(of: text) { newValue in
                print(newValue)
                // 这里可加入校验逻辑，更新错误状态
                error = !validate(newValue)
            }
            .font(UIConstraints.fontRegular(size: 16))
            .offset(x: 0, y: (!isEditing && !isFilled) ? 0 : 6)
            .padding()
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(isEditing ? Color.accentColor : Color(.secondarySystemBackground), lineWidth: 2)
            )
            .overlay(
                RoundedRectangle(cornerRadius: 5)
                    .stroke(error ? Color.red : Color.clear, lineWidth: 2)
            )

        }
        .frame(height: 56)
        .background {
            Color(.secondarySystemBackground)
                .cornerRadius(5.0)
                .shadow(radius: 5.0)
        }
        .animation(.default, value: error)
        if error {
            Text(prompt)
                .padding(.leading, 2)
                .font(.footnote)
                .foregroundColor(Color(.systemRed))
        }
    }
}

struct InputTextField_Previews: PreviewProvider {
    @State static var text: String = ""
    @State static var valid: Bool = true

    static var previews: some View {
        TextInputField(title: "", prompt: "prompt", validate: { !$0.isEmpty }, placeholder:  "placeholder", text: $text)
            .padding()
    }
}

额外说明 #

• 原代码中validate闭包逻辑为{$0.isEmpty}，意味着输入为空时才返回true，可能和预期校验逻辑相反，预览中已调整为{!$0.isEmpty}，你可根据需求修改。
• 修改后text变化会实时触发onChange，print(newValue)会输出当前输入内容，isFilled随text自动更新，浮动占位符动画也能正常工作。

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