keyboardType 键盘类型

.keyboardType() 修饰符仅在 iOS 下有用,否则会报错,因此在做跨平台项目时,注意要用 #if os(iOS) 判断。

.numberPad 和 .decimalPad 键盘类型告诉 SwiftUI 显示数字 0 到 9,也可以选择显示小数点,但这并不能阻止用户输入其他值。例如,如果他们有硬件键盘,他们可以输入自己喜欢的内容,如果他们从其他地方复制一些文本,他们就可以将其粘贴到文本字段中,无论文本内有什么内容。不过没关系——当按下回车键时,文本字段会自动过滤掉错误的值。

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a03e9621-27de-4ddc-a9ed-38636039831a/Screenshot_-_2020-10-28_13.18.03.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/30fdb5bd-0068-4f39-9128-35ba5f027284/Screenshot_-_2020-10-28_13.18.11.png

Ascii Capable .keyboardType(.asciiCapable)
Numbers and Punctuation .keyboardType(.numbersAndPunctuation)
URL .keyboardType(.URL)
Numpad .keyboardType(.numberPad)
Phonepad .keyboardType(.phonePad)
Name Phonepad .keyboardType(.namePhonePad)
Email .keyboardType(.emailAddress)
Decimal Pad .keyboardType(.decimalPad)
Twitter 社交媒体 .keyboardType(.twitter)
Web Search .keyboardType(.webSearch)
Ascii Capable Numpad .keyboardType(.asciiCapableNumberPad)

submit 按钮及其行为

submitLabel 自定义键盘按钮

使用 .submitLabel() 修饰符,可以定制输入框附带键盘的右下角的提交按钮的样式,例如显示成 “Done” 或 “Next”

TextField("Enter your email address", text: $emailAddress)
		.textContentType(.emailAddress)
		.submitLabel(.join)

onSubmit 处理键盘提交

onSubmit() 修饰符可以附加到层次结构中的任何视图。使用此修饰符,用户在 TextField 或 SecureField 完成文字输入后,可以选择运行一个指定的方法。

// 例如,我们可以要求用户输入密码,然后在按回车键时运行一些代码:
struct ContentView: View {
    @State private var password = ""
    var body: some View {
        SecureField("Password", text: $password)
            .onSubmit {
                print("Authenticating…")
            }
    }
}

使用 onSubmit() 的优点是它可以捕获在其上下文中提交的所有文本值,这使得填写表单变得更容易:

struct ContentView: View {
    @State private var username = ""
    @State private var password = ""
    var body: some View {
        Form {
            TextField("Username", text: $username)
            SecureField("Password", text: $password)
        }
        .onSubmit {
            guard username.isEmpty == false && password.isEmpty == false else { return }
            print("Authenticating…")
        }
    }
}

toolbar 添加键盘工具栏

SwiftUI 允许向键盘添加输入的附加视图,这意味着当用户激活某些文本输入时,我们可以在那里显示自定义按钮。这是通过将 toolbar() 修饰符附加到相应的视图来完成的。创建工具栏项组时,使用 .keyboard 位置将此工具栏附加到键盘,如下所示:

struct ContentView: View {
    @State private var name = "Taylor"
    var body: some View {
        TextField("Enter your name", text: $name)
            .textFieldStyle(.roundedBorder)
            .toolbar {
                ToolbarItemGroup(placement: .keyboard) {
		                // 里面是具体视图的内容
                    Button("Click me!") {
                        print("Clicked")
                    }
                }
            }
    }
}

// 这个工具栏实际上是放置 “隐藏键盘” 按钮的好地方:
struct ContentView: View {
    @State private var name = "Taylor Swift"
    @FocusState var isInputActive: Bool

    var body: some View {
        NavigationStack {
            TextField("Enter your name", text: $name)
                .textFieldStyle(.roundedBorder)
                .focused($isInputActive)
                .toolbar {
                    ToolbarItemGroup(placement: .keyboard) {
                        Spacer()
                        Button("Done") {
                            isInputActive = false
                        }
                    }
                }
        }
    }
}