SwiftUI文本输入框TextField
SwiftUI文本输入框TextField

SwiftUI文本输入框TextField

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/

   

如果您认为这篇文章给您带来了帮助,您可以在此通过支付宝或者微信打赏网站开发者。

欢迎加入我们的 微信交流群QQ交流群,交流更多精彩内容!
微信交流群二维码 QQ交流群二维码

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注