.keyboardType()
修饰符仅在 iOS 下有用,否则会报错,因此在做跨平台项目时,注意要用 #if os(iOS)
判断。
.numberPad
和 .decimalPad
键盘类型告诉 SwiftUI 显示数字 0 到 9,也可以选择显示小数点,但这并不能阻止用户输入其他值。例如,如果他们有硬件键盘,他们可以输入自己喜欢的内容,如果他们从其他地方复制一些文本,他们就可以将其粘贴到文本字段中,无论文本内有什么内容。不过没关系——当按下回车键时,文本字段会自动过滤掉错误的值。
Ascii Capable | .keyboardType(.asciiCapable) |
Numbers and Punctuation | .keyboardType(.numbersAndPunctuation) |
URL | .keyboardType(.URL) |
Numpad | .keyboardType(.numberPad) |
Phonepad | .keyboardType(.phonePad) |
Name Phonepad | .keyboardType(.namePhonePad) |
.keyboardType(.emailAddress) | |
Decimal Pad | .keyboardType(.decimalPad) |
Twitter 社交媒体 | .keyboardType(.twitter) |
Web Search | .keyboardType(.webSearch) |
Ascii Capable Numpad | .keyboardType(.asciiCapableNumberPad) |
使用 .submitLabel()
修饰符,可以定制输入框附带键盘的右下角的提交按钮的样式,例如显示成 “Done” 或 “Next”
TextField("Enter your email address", text: $emailAddress)
.textContentType(.emailAddress)
.submitLabel(.join)
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…")
}
}
}
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
}
}
}
}
}
}