SwiftUI控件之 TextField

发表于 更新于 分类于 阅读次数：

在 SwiftUI 中，TextField 用来展示和接收用户编辑的文本内容。

使用

在创建一个TextField之前，需要先定义一个响应式类型的状态变量：

1
@State private var userName:String = ""

在创建TextField 时，使用$userName 的形式绑定这个状态变量：

1
TextField("User Name",text: $userName)

当userName 这个变量和TextField 绑定后，当我们在输入框中输入或者删除内容时，userName 对应的值也会跟着发生变化。

TextField 的不同风格

使用textFieldStyle 修饰器来定义TextField的不同风格：

  • roundedBorder： 圆角边框样式；
  • plain ： 默认的无边框样式；
1
2
3
4
5
6
7
VStack(spacing: 20) {
    TextField("User Name",text: $userName)
        .textFieldStyle(.roundedBorder)
    
    TextField("User Name",text: $userName)
        .textFieldStyle(.plain)
}

效果如下：

SecureField

除了常见的TextField ，还可以使用SecureField 来获取一些隐私数据的输入，例如密码。

1
SecureField("Password",text: $password)

使用安全输入框时，当用户输入类似于密码之类的隐私数据时，会以**····** 形式呈现，从而起到保护隐私数据的作用。

官方文档

TextField | Apple Developer Documentation

SecureField | Apple Developer Documentation