Swift UI Cách tạo TextField chỉ chấp nhận số

Tôi mới sử dụng swiftUI và iOs, tôi đang cố gắng tạo trường nhập liệu sẽ chỉ chấp nhận số

 TextField("Total number of people", text: $numOfPeople)

TextField cũng cho phép các ký tự chữ cái, làm cách nào để giới hạn người dùng chỉ nhập số?

Bạn có thể đặt loại bàn phím trên TextFieldđó sẽ giới hạn những gì mọi người có thể gõ.

TextField("Total number of people", text: $numOfPeople)
    .keyboardType(.numberPad)

Tài liệu của Apple có thể được tìm thấy ở đây và bạn có thể xem danh sách tất cả các loại bàn phím được hỗ trợ tại đây .

Lưu ý: điều này sẽ không hoạt động trên iPad vì không có phím số cho iPad. Để có giải pháp tốt hơn, hãy kiểm tra giải pháp của John M bên dưới https://stackoverflow.com/a/58736068/5508175

Mặc dù hiển thị bàn phím số là bước đầu tiên tốt nhưng thực tế nó không ngăn được dữ liệu xấu được nhập vào:

1. Người dùng có thể dán văn bản không phải số vào trường văn bản
2. Người dùng iPad vẫn sẽ có được một bàn phím đầy đủ
3. Bất cứ ai có bàn phím Bluetooth kèm theo đều có thể gõ bất cứ thứ gì

Những gì bạn thực sự muốn làm là vệ sinh đầu vào, như thế này:

import SwiftUI
import Combine

struct StackOverflowTests: View {
    @State private var numOfPeople = "0"

    var body: some View {
        TextField("Total number of people", text: $numOfPeople)
            .keyboardType(.numberPad)
            .onReceive(Just(numOfPeople)) { newValue in
                let filtered = newValue.filter { "0123456789".contains($0) }
                if filtered != newValue {
                    self.numOfPeople = filtered
                }
        }
    }
}

Bất cứ khi nào numOfPeoplethay đổi, các giá trị không phải là số được lọc ra và giá trị được lọc được so sánh để xem có numOfPeoplenên cập nhật lần thứ hai hay không, ghi đè đầu vào xấu bằng đầu vào được lọc.

Lưu ý rằng Justnhà xuất bản yêu cầu bạn import Combine.

BIÊN TẬP:

Để giải thích cho Justnhà xuất bản, hãy xem xét phác thảo khái niệm sau đây về những gì xảy ra khi bạn thay đổi giá trị trong TextField:

1. Bởi vì TextFieldmất a Bindingđến a String, khi nội dung của trường được thay đổi, nó cũng ghi thay đổi đó trở lại @Statebiến.
2. Khi một biến được đánh dấu @Statethay đổi, SwiftUI sẽ tính toán lại thuộc bodytính của chế độ xem.
3. Trong quá trình bodytính toán, một Justnhà xuất bản được tạo ra. Combine có rất nhiều nhà xuất bản khác nhau phát ra các giá trị theo thời gian, nhưng Justnhà xuất bản chỉ lấy "chỉ" một giá trị duy nhất (giá trị mới numberOfPeople) và phát ra khi được hỏi.
4. Các onReceivephương pháp làm cho một Viewthuê bao với một nhà xuất bản, trong trường hợp này, các Justnhà xuất bản, chúng tôi vừa tạo ra. Sau khi đăng ký, nó ngay lập tức yêu cầu bất kỳ giá trị có sẵn nào từ nhà xuất bản, trong đó chỉ có một giá trị mới numberOfPeople.
5. Khi onReceivethuê bao nhận được một giá trị, nó thực hiện việc đóng được chỉ định. Đóng cửa của chúng tôi có thể kết thúc một trong hai cách. Nếu văn bản chỉ là số, thì nó không làm gì cả. Nếu văn bản được lọc là khác nhau, nó được ghi vào @Statebiến, bắt đầu lại vòng lặp, nhưng lần này việc đóng sẽ thực thi mà không sửa đổi bất kỳ thuộc tính nào.

Kiểm tra bằng cách sử dụng Kết hợp để biết thêm.

Bạn không cần sử dụng Combinevà onReceive, bạn cũng có thể sử dụng mã này:

class Model: ObservableObject {
    @Published var text : String = ""
}

struct ContentView: View {

    @EnvironmentObject var model: Model

    var body: some View {
        TextField("enter a number ...", text: Binding(get: { self.model.text },
                                                      set: { self.model.text = $0.filter { "0123456789".contains($0) } }))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView().environmentObject(Model())
    }
}

Thật không may, cũng có một nhấp nháy nhỏ, vì vậy bạn cũng có thể thấy các ký tự không được phép trong một thời gian rất ngắn (trong mắt tôi ngắn hơn một chút như cách với Combine)

Một cách tiếp cận khác có lẽ là tạo Chế độ xem bao bọc khung nhìn TextField và giữ hai giá trị: var riêng giữ Chuỗi đã nhập và giá trị ràng buộc giữ tương đương Double. Mỗi lần người dùng nhập một ký tự, nó sẽ cố cập nhật Double.

Đây là một triển khai cơ bản:

struct NumberEntryField : View {
    @State private var enteredValue : String = ""
    @Binding var value : Double

    var body: some View {        
        return TextField("", text: $enteredValue)
            .onReceive(Just(enteredValue)) { typedValue in
                if let newValue = Double(typedValue) {
                    self.value = newValue
                }
        }.onAppear(perform:{self.enteredValue = "\(self.value)"})
    }
}

Bạn có thể sử dụng nó như thế này:

struct MyView : View {
    @State var doubleValue : Double = 1.56

    var body: some View {        
        return HStack {
             Text("Numeric field:")
             NumberEntryField(value: self.$doubleValue)   
            }
      }
}

Đây là một ví dụ cơ bản - bạn có thể muốn thêm chức năng để hiển thị cảnh báo cho đầu vào kém và có thể kiểm tra giới hạn, v.v ...