如何在 SwiftUI 中强制文本字段仅输入数值

Question

大家好，我正在尝试在 textField 中输入一个数值。有一个问题，我创建了一个自定义文本文件，所以无论我试图为数字键盘添加代码，它都会显示错误“Extra argument 'Formatter' in call”

这里是海关TextFiled的代码

import SwiftUI

struct TextFieldCustom: View {
    let placeholder: String
    @Binding var text: String
    @State private var width = CGFloat.zero
    @State private var labelWidth = CGFloat.zero
    @State private var isEditing = false
 
    public init(placeHolder: String,
                 text: Binding<String>) {
         self._text = text
         self.placeholder = placeHolder
      }
        
    var body: some View {
        
        TextField(placeholder, text: $text, prompt: Text(placeholder).foregroundColor(.white))
               .foregroundColor(.white)
               .font(Font.custom("NATS 400", size: 17))
               .padding(EdgeInsets(top: 15, leading: 10, bottom: 15, trailing: 10))
               .autocapitalization(.none)
                .background {
                   ZStack {
                       RoundedRectangle(cornerRadius: 5)
                           .trim(from: 0, to: 0.55)
                           .stroke(.white, lineWidth: 2)
                       RoundedRectangle(cornerRadius: 5)
                           .trim(from: 0.565 + (0.43 * (labelWidth / width)), to: 1)
                           .stroke(.white, lineWidth: 2)
                       
                       
                       Text(placeholder)
                           .font(Font.custom("NATS 400", size: 14))
                           .foregroundColor(.white)
                           .overlay( GeometryReader { geo in Color.clear.onAppear { labelWidth = geo.size.width }})
                           .padding(2)
                           .font(.caption)
                           .frame(maxWidth: .infinity,
                                  maxHeight: .infinity,
                                  alignment: .topLeading)
                           .offset(x: 20, y: -12)
                   }
               }
               .overlay( GeometryReader { geo in Color.clear.onAppear { width = geo.size.width }})
               .onChange(of: width) { _ in
                   print("Width: ", width)
               }
               .onChange(of: labelWidth) { _ in
                   print("labelWidth: ", labelWidth)
               }
      }
}
 and I am using this on main screen like :- 
TextFieldCustom(placeHolder: "Enter Phone Number", text: $phone)

当我输入如下代码时：-

TextFieldCustom(placeHolder: "Enter Phone Number", text: $phone, formatter: NumberFormatter())

也试试这段代码：-

let formatter: NumberFormatter = {
    let formatter = NumberFormatter()
    formatter.numberStyle = .decimal
    return formatter
}()

TextFieldCustom(placeHolder: "Enter Phone Number", text: $phone, formatter: formatter) 还有这个：- .keyboardType(.numberPad) 但他们都没有工作

所以任何人都可以帮我解决这个问题。谢谢

Answer 1

你可以做的是创建一个字符串扩展来过滤掉数字

var filterForNumber: String {
        let okayChars = Set("0123456789")
        return self.filter{okayChars.contains($0)}
    }

而 onChange 方法你可以做类似的事情

.onChange(of: text) {
               self.text = $0.filterForNumber
           }