SwiftUI 基础控件 - TextField

前言

在 SwiftUI 中，TextField 用于获取用户输入的文本。它是一个常用的输入控件，适用于表单或需要用户输入文字的场景。它就类似于 UIKit 中的 UITextField。 以下是一些常见的 TextField 使用方法。

基本用法

TextField 需要一个 String 类型的绑定来存储输入内容，可以通过 @State 属性来绑定。

struct ContentView: View {
    @State private var text: String = ""

    var body: some View {
        VStack {
            TextField("请输入文本", text: $text)
            Text("输入内容：\(text)")
        }
        .padding()
    }
}

在这个例子中，@State 修饰的 text 是 TextField 绑定的属性，输入内容会自动更新到 text。

自定义样式和修饰符

可以使用一些修饰符来调整 TextField 的样式：

• textFieldStyle()：可以设置不同的文本框样式，如 RoundedBorderTextFieldStyle。
• padding()：为文本框增加内边距。
• font()：设置字体样式。

TextField("请输入用户名", text: $text)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding()
    .font(.title)
    .foregroundColor(.blue)

示例图如下：

使用 onCommit 闭包

TextField 提供了一个 onCommit 闭包，用于在用户按下回车键时执行操作。

TextField("输入密码", text: $text, onCommit: {
    print("用户按下了回车键")
})
.textFieldStyle(RoundedBorderTextFieldStyle())
.padding()

限制输入内容

在日常开发中，限制出入内容是非常常见的需求，这个需求我们可以在 TextField 的 onChange 闭包中控制用户输入，比如限制字数或过滤字符：

TextField("请输入文字", text: $text)
    .onChange(of: text) { newValue in
        if newValue.count > 10 {
            text = String(newValue.prefix(10)) // 限制最大输入为10个字符
        }
    }
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding()

带有图标的 TextField

可以在 TextField 前后添加 Image 或 Text 作为修饰：

HStack {
    Image(systemName: "magnifyingglass")
        .foregroundColor(.gray)
    TextField("搜索...", text: $text)
        .textFieldStyle(PlainTextFieldStyle())
}
.padding()
.background(Color(.systemGray6))
.cornerRadius(8)

密码输入框

SwiftUI 还提供了 SecureField 来处理密码输入。SecureField 的使用方式类似于 TextField，不过输入内容会被隐藏。

SecureField("请输入密码", text: $password)
    .textFieldStyle(RoundedBorderTextFieldStyle())
    .padding()

表单中的 TextField

在表单布局中使用 TextField 很简单，只需要将它们放入 Form 容器即可：

@State private var name: String = ""
@State private var password: String = ""

var body: some View {
    Form {
        Section(header: Text("用户信息")) {
            TextField("姓名", text: $name)
            SecureField("密码", text: $password)
        }
    }
}

效果图如下：