SwiftUI中如何在父子视图间配合FocusState实现输入框焦点跳转？

核心问题拆解 #

你遇到的编译错误，大概率是因为子视图中同时混用了@State的focusField和父视图传递的FocusState绑定，导致Swift编译器类型推断过载。下面是无需重复代码、能正常实现回车跳转的正确写法：

1. 父视图定义与调用 #

首先在父视图中统一管理焦点状态枚举和@FocusState变量，然后给每个子视图传递必要的绑定、当前字段标识和下一个目标字段：

// 定义焦点枚举，每个字段对应一个case
enum RegistrationFocus: Hashable {
    case firstName
    case lastName
    case email
    case phone
}

struct RegistrationView: View {
    // 父视图管理全局焦点状态
    @FocusState private var focusedField: RegistrationFocus?
    
    // 示例输入绑定
    @State private var firstName = ""
    @State private var lastName = ""
    @State private var email = ""
    @State private var phone = ""
    
    var body: some View {
        VStack(spacing: 20) {
            // 传递焦点绑定、当前字段、下一个字段
            PersonalUserDetailsRow(
                title: "First Name",
                inputText: $firstName,
                focus: $focusedField,
                currentField: .firstName,
                nextField: .lastName
            )
            
            PersonalUserDetailsRow(
                title: "Last Name",
                inputText: $lastName,
                focus: $focusedField,
                currentField: .lastName,
                nextField: .email
            )
            
            PersonalUserDetailsRow(
                title: "Email",
                inputText: $email,
                focus: $focusedField,
                currentField: .email,
                nextField: .phone
            )
            
            // 最后一个字段可以传nil，回车后收起键盘
            PersonalUserDetailsRow(
                title: "Phone",
                inputText: $phone,
                focus: $focusedField,
                currentField: .phone,
                nextField: nil
            )
        }
        .padding()
    }
}

2. 子视图实现（复用无重复代码） #

子视图直接接收父视图的FocusState绑定，无需额外的@State变量，通过focused修饰符关联当前字段，onSubmit触发焦点切换：

struct PersonalUserDetailsRow: View {
    let title: String
    @Binding var inputText: String
    // 直接接收父视图的FocusState绑定
    @FocusState.Binding var focus: RegistrationFocus?
    let currentField: RegistrationFocus
    let nextField: RegistrationFocus?
    
    var body: some View {
        VStack(alignment: .leading, spacing: 8) {
            Text(title)
                .font(.subheadline)
                .foregroundColor(.secondary)
            
            TextField("Enter \(title.lowercased())", text: $inputText)
                .textFieldStyle(.roundedBorder)
                // 关联当前字段与焦点状态
                .focused($focus, equals: currentField)
                // 回车时切换到下一个字段，无下一个则清空焦点（收起键盘）
                .onSubmit {
                    focus = nextField
                }
                .textInputAutocapitalization(.never)
        }
    }
}

关键优化点 #

• 移除子视图中多余的@State变量，直接复用父视图的FocusState绑定，避免类型推断冲突
• 通过nextField参数统一管理跳转逻辑，子视图无需关心具体跳转目标，完全复用
• 最后一个字段传递nil作为nextField，回车后自动收起键盘

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