如何使 SwiftUI 文本字段部分不可移动？答案

【问题标题】：How do I make SwiftUI textfield partly non removable?如何使 SwiftUI 文本字段部分不可移动？
【发布时间】：2020-09-13 09:20:52
【问题描述】：

我正在尝试使用无法从文本字段中删除的国家/地区代码前缀创建一个文本字段。选择国家后，作为前缀的国家代码无法删除，用户仍然可以键入国家代码前缀后面的联系电话。现在我只是编码，直到将代码分配到文本字段中，但国家代码仍然是可移动的。

TextField("Number", text: $reg.mobile)
         .keyboardType(.numberPad)
         .padding()
         .background(Color.textfieldColor)
         .clipShape(RoundedRectangle(cornerRadius: 10))
         .padding(.trailing,10)

在此文本字段中，我使用国家/地区代码初始化 reg.mobile。但是代码是可移动的。我试试

class RegisterPost: ObservableObject, Codable{
    @Published var mobile = "60"
    //remaining

if expand {
                    Button(action: {
                        self.expand.toggle()
                        self.reg.mobile = "60"
                    }) {
                        HStack{
                            Text("+60")
                                .font(.subheadline)
                        }
                    }
                    .padding(5)
                    
                    Button(action: {
                        self.expand.toggle()
                        self.reg.mobile = "65"                        
                    })

我尝试将国家/地区代码分配给 reg.mobile 并将其作为文本字段的前缀并且不可删除。 Add a prefix to TextField in SwiftUI 在这个问题中我只能找到一个固定的前缀而不是动态的。无论如何寻找建议可以做我想做的事吗？

【问题讨论】：

可以使前缀不可删除（至少是持久的），但输入插入符号无论如何都会移动，因为 TextField 没有 API 来管理输入。所以最好根据 UITextField 做自己想做的事情。
您可以通过Combine框架订阅已发布的字符串，如果用户尝试删除它，则将字符串替换为前缀。
@Asperi ya 我上次发现了输入插入符号的问题。 Tq 解释一下。？？？？

标签： swift swiftui textfield

【解决方案1】：

一个简单的解决方案是将 Text 和 TextField 视图合并到一个新视图中

struct PhoneNumberField: View {
    let code: String
    @Binding var number: String

    var body: some View {
        HStack {
            Text(code)
            TextField("Number", text: $number)
        } 
        .padding()
        .background(Color.textfieldColor)
        .clipShape(RoundedRectangle(cornerRadius: 10))
        .padding(.trailing,10)

    }
}

【讨论】：

【解决方案2】：

您可以使用.onChange 修饰符来检查前缀是否已更改并将其改回

TextField("Number", text: $reg.mobile)
    .onChange(of: reg.mobile) { newValue in
        !newValue.hasPrefix("60") {
            reg.mobile = "60"
        }
    }

【讨论】：