SwiftUI中SecureField引发绑定输入框内容随机清空的原因排查

经过关闭安全输入属性的对照验证，可完全排除业务校验逻辑、ViewModel数据绑定链路的问题，异常直接关联SecureField组件的渲染与状态保持机制，结合代码场景的触发逻辑可明确两个核心诱因：

• 当前表单被嵌套在List容器中，List的cell复用、回收机制会在焦点切换时重建对应位置的视图层级，打断SecureField内部的文本状态保持链路。因为所有输入框都被包裹在同一个List的cell内，当SecureField触发状态重置、cell被回收重建时，同个cell内的其他普通输入框也会被临时初始化，表现为姓名、邮箱等非安全输入框的内容随机被清空。
• CinderTextField的描边逻辑通过三元运算动态切换3种不同的RoundedRectangle实例，每次输入内容变动触发View重算时，都会生成全新的overlay视图，进一步增加SecureField的重绘概率；叠加SecureField默认关联的系统密码自动填充逻辑（对应控制台日志中的iCloud钥匙串未启用报错），系统在自动填充校验失败时会触发SecureField内部的临时文本重置，和绑定的属性状态出现不同步，最终表现为无规律的内容清空。

修复全程不需要改动ViewModel的现有校验逻辑、数据存储结构，仅调整视图层的渲染逻辑即可解决问题：

• 替换表单容器：将外层包裹的List更换为ScrollView + VStack结构，彻底移除List的cell复用逻辑对输入框状态的干扰。
• 优化描边渲染逻辑：将动态生成不同形状的overlay逻辑改为复用同一个RoundedRectangle实例，仅通过变量切换描边颜色，避免因为形状实例变动触发的视图层级重建。
• 补充输入框属性配置：为SecureField和TextField添加.disableAutocorrection(true)配置，为SecureField明确设置.textContentType(.password)属性，减少系统自动填充逻辑对输入状态的不必要干预。

优化后的自定义输入框组件：

struct CinderTextField: View {
    @Environment(\.colorScheme) var colorScheme
    var title: String
    @Binding var field: String
    var placeholder: String
    var prompt: String
    var isSecure = false
    var isValid = true
    // 统一计算描边颜色，不动态切换形状实例
    private var strokeColor: Color {
        if field == "" {
            return colorScheme == .dark ? .white : .black
        }
        return isValid ? (colorScheme == .dark ? .white : .black) : .red
    }
    
    var body: some View {
        VStack(alignment: .leading) {
            Text(title)
                .fixedSize(horizontal: false, vertical: true)
                .font(.custom("SFProRounded-Regular", size: 17))
                .foregroundColor(colorScheme == .dark ? Color.white : .black)
            
            VStack(alignment: .leading) {
                if isSecure {
                    SecureField(placeholder, text: $field)
                        .autocapitalization(.none)
                        .disableAutocorrection(true)
                        .textContentType(.password)
                } else {
                    TextField(placeholder, text: $field)
                        .autocapitalization(.none)
                        .disableAutocorrection(true)
                }
            }
            .padding(8)
            // 复用同一个RoundedRectangle，仅修改描边颜色
            .overlay(
                RoundedRectangle(cornerRadius: 8)
                    .stroke(strokeColor, lineWidth: 1)
            )
            
            VStack(alignment: .leading) {
                Text(prompt)
                    .fixedSize(horizontal: false, vertical: true)
                    .font(.custom("SFProRounded-Regular", size: 17))
                    .foregroundColor(Color.red)
                    .padding(.bottom, 15)
            }
        }
    }
}

调整后的主视图容器结构：

var body: some View {
    GeometryReader { geometry in
        // 替换原List为ScrollView，移除cell复用逻辑
        ScrollView {
            VStack(spacing: 20) {
                TextHeader(text: "Create an account with Email")
                    .lineLimit(1)
                    .minimumScaleFactor(0.5)
                // 原有头像、输入框、创建账号按钮的业务代码完全保留
            }
            .frame(maxWidth: .infinity)
        }
    }
}

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