SwiftUI中的TextField主要用于单行文本输入,类似于 UITextField。
默认仅支持单行显示,适合较短的输入,例如用户名、密码等。
用法:与字符数、数值绑定,用于实时保存和显示用户输入的短文本。
基本用法
TextField主要提供了两种绑定格式:
1、绑定String:
TextField("Placeholder", text: $text)
适合名称、标题、备注等文本输入框。
2、绑定数值(Int/Double):
TextField("Amount", value: $number, format: .number)
适合年龄、薪资等数字输入框。
基本参数
1、占位符
SwiftUI有两种placeholder:
1、简单的文本占位符:
TextField("Placeholder", text: $text)
在输入框空白处显示灰色提示文字。
2、视图占位符(iOS 15+):
TextField("Title", text: $text, prompt: Text("Placeholder"))
prompt的好处是可以写更复杂的View。
2、axis多行输入
在 iOS 16 及以上版本中,TextField 可以通过 axis: .vertical 来支持多行输入,从而缩小了与 TextEditor 的功能差距。
TextField("Enter your text", text: $notes, axis: .vertical)
在 TextField 中,axis 属性控制文本输入的轴方向。axis: .vertical 可以让文本内容超出一行时垂直扩展,而不是水平滚动。适用于需要多行文本输入的情况,但依然保留了 TextField 的一些特性。
水平滚动 (axis: .horizontal,默认):文本在一行中输入,内容超出后水平滚动。适合短文本。
垂直扩展 (axis: .vertical):允许 TextField 垂直扩展,适合稍长文本或需要的多行输入内容(尽管 TextField 不如 TextEditor 适合长文本)。
常用修饰符
1、keyboardType:指定键盘类型,例如数字键盘、email 键盘。
.keyboardType(.numberPad)
.keyboardType(.decimalPad)
.keyboardType(.emailAddress)
2、textContentType:输入的数据类别。
.textContentType(.username)
.textContentType(.password)
.textContentType(.oneTimeCode)
它用于自动填充、隐私保护、输入预测等。
3、focused / FocusState:TextField 的“焦点状态开关”。
@FocusState var isFocused: Bool
TextField("Name", text: $name)
.focused($isFocused)
配合 @FocusState 打开/收起键盘。
isFocused = true // 打开键盘
isFocused = false // 收起键盘
4、onChange:监听输入变化。
.onChange(of: text) { newValue in
print("User typed:", newValue)
}
5、onSubmit:按下键盘的 return 时触发。
.onSubmit {
print("User pressed return")
}
6、submitLabel:更改键盘右下角按钮的文字。
.submitLabel(.done)
.submitLabel(.search)
.submitLabel(.next)
7、disableAutocorrection:关闭自动纠错。
.disableAutocorrection(true)
适合代码、密码、数字等场景。
8、autocapitalization:控制首字母大写策略。
.autocapitalization(.none)
通常配合 email 或账号使用。
双向绑定
TextField的文本内容通过双向绑定(Binding)实现。
text: Binding<String>
value: Binding<Int>
TextField不会保存内容,仅“显示”绑定值。
每次用户输入一个字符,它都会触发:
binding.wrappedValue = 新文本
这也是SwiftUI的“数据驱动UI”在输入组件的体现。
总结
TextField通过双向绑定,可以输入文本、数字内容,并将数值返回给绑定的变量。
TextField还可以使用formatstyle格式化输入内容。
相关文章
1、SwiftUI TextField使用FormatStyle格式化输入内容:https://fangjunyu.com/2025/03/24/swiftui-textfield%e4%bd%bf%e7%94%a8formatstyle%e6%a0%bc%e5%bc%8f%e5%8c%96%e8%be%93%e5%85%a5%e5%86%85%e5%ae%b9/
2、SwiftUI键盘类型修饰符keyboardType:https://fangjunyu.com/2024/12/11/swiftui%e9%94%ae%e7%9b%98%e7%b1%bb%e5%9e%8b%e4%bf%ae%e9%a5%b0%e7%ac%a6keyboardtype/
3、SwiftUI内容提示修饰符textContentType: https://fangjunyu.com/2024/12/11/swiftui%e5%86%85%e5%ae%b9%e6%8f%90%e7%a4%ba%e4%bf%ae%e9%a5%b0%e7%ac%a6textcontenttype/
4、SwiftUI提交修饰符onSubmit:https://fangjunyu.com/2024/12/26/swiftui%e6%8f%90%e4%ba%a4%e4%bf%ae%e9%a5%b0%e7%ac%a6onsubmit/
5、SwiftUI键盘提交修饰符SubmitLabel:https://fangjunyu.com/2024/12/26/swiftui%e9%94%ae%e7%9b%98%e6%8f%90%e4%ba%a4%e4%bf%ae%e9%a5%b0%e7%ac%a6submitlabel/
