Amplify SwiftUI Authenticator UI：如何绑定输入字段数组到TextField

问题分析 #

你之前通过索引state.fields[0].value绑定字段的方式不可靠，因为字段顺序可能随Authenticator配置变化，且无法保证绑定的是正确的邮箱/手机号字段，导致双向绑定失效。

正确实现代码 #

1. 自定义注册视图（绑定邮箱/手机号）

struct CustomSignUpView: View {
    @ObservedObject var state: SignUpState
    
    var body: some View {
        VStack(spacing: 16) {
            // 绑定邮箱字段
            TextField("邮箱", text: state.field(.email).value)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.emailAddress)
            
            // 绑定密码字段
            SecureField("密码", text: state.field(.password).value)
                .textFieldStyle(.roundedBorder)
            
            // 若启用手机号注册，绑定手机号字段
            TextField("手机号", text: state.field(.phoneNumber).value)
                .textFieldStyle(.roundedBorder)
                .keyboardType(.phonePad)
            
            Button("完成注册") {
                Task {
                    try await state.signUp()
                }
            }
            .buttonStyle(.borderedProminent)
            .disabled(!state.isSignUpEnabled)
        }
        .padding()
    }
}

2. 主登录页面

struct LoginScreen: View {
    var body: some View {
        Authenticator {
            // 登录成功后显示的内容
            Text("欢迎登录")
        } signUpContent: { state in
            CustomSignUpView(state: state)
        }
    }
}

关键说明 #

• 使用state.field(.email)或state.field(.phoneNumber)获取对应字段的绑定，避免索引访问的不确定性
• 通过state.signUp()异步触发注册流程，需放在Task中执行
• 利用state.isSignUpEnabled判断注册按钮是否可点击（自动校验字段格式）

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