SwiftUI：如何实现带固定文本且可全区域点击的TextField

方案1：优化HStack布局，让整个区域可点击激活 #

原来的HStack只有TextField能触发编辑，给整个容器加点击手势，绑定焦点状态就能解决点击范围问题：

struct EmailInputView: View {
    @State private var email = ""
    @FocusState private var isEmailFocused: Bool
    
    var body: some View {
        HStack {
            Image(systemName: "envelope")
            Text("email:")
            TextField("", text: $email)
                .focused($isEmailFocused)
        }
        .padding(.horizontal, 12)
        .padding(.vertical, 8)
        .border(Color.gray.opacity(0.3))
        .onTapGesture {
            isEmailFocused = true
        }
    }
}

点击HStack里的图标、文本或输入框任何位置，都会让TextField自动获得焦点，光标默认在输入区域开头，操作体验直接拉满。

方案2：用TextField自带的prefix修饰符（最优解） #

SwiftUI 3.0+提供了专门的prefix修饰符，完美适配固定前缀场景，不用自己折腾布局和焦点，光标默认就在前缀后面，绝不会出现覆盖问题：

struct EmailInputView: View {
    @State private var email = ""
    
    var body: some View {
        TextField("输入邮箱", text: $email)
            .prefix {
                HStack(spacing: 4) {
                    Image(systemName: "envelope")
                    Text("email:")
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 8)
            .border(Color.gray.opacity(0.3))
    }
}

prefix里可以放任意View组合，图标加文本都没问题，点击整个输入框区域都能激活编辑，完全符合你要的效果。

方案3：自定义绑定处理固定前缀（适合复杂场景） #

如果需要动态修改前缀、或对输入内容有特殊校验，可以通过自定义绑定强制保留前缀，同时手动控制光标位置：

struct EmailInputView: View {
    private let prefix = "email: "
    @State private var fullText = "email: "
    @FocusState private var isFocused: Bool
    
    var body: some View {
        TextField("", text: $fullText)
            .focused($isFocused)
            .onAppear {
                // 初始时把光标移到前缀末尾
                DispatchQueue.main.async {
                    guard let textField = UITextField.appearance() as? UITextField else { return }
                    let cursorPosition = textField.position(from: textField.beginningOfDocument, offset: prefix.count)
                    textField.selectedTextRange = textField.textRange(from: cursorPosition, to: cursorPosition)
                }
            }
            .onChange(of: fullText) { newValue in
                // 防止用户删除前缀
                if !newValue.hasPrefix(prefix) {
                    fullText = prefix + newValue.replacingOccurrences(of: prefix, with: "")
                }
            }
            .padding(.horizontal, 12)
            .padding(.vertical, 8)
            .border(Color.gray.opacity(0.3))
    }
}

这个方案通过绑定fullText强制保留前缀，用户删除前缀会自动补回，适合有特殊业务需求的场景。

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