SwiftUI 入门教程 – 输入框 TextField

在 SwiftUI 中，输入框是使用 TextField 控件来完成的。它的示例代码如下：

struct TextFieldD: View {
    @State private var username: String = ""
    var body: some View {
        TextField(
            "请输入用户名",
            text: $username
        )
        Text(username)
                .foregroundColor(.blue)
    }
}

首要，声明一个 @State 修饰的 username 特点来存储输入框的文本，如果不了解 @State 能够看这里。然后在 body 里回来一个 TextField 用来处理用户的输入；一个 Text 用来实时显示用户的输入内容。

需求留意的是：在实时预览的视图上 Text 是无法获取 username 的，所以需求你运行在模拟器里边看作用。

增加边框

示例代码：

TextField(
    "请输入用户名",
    text: $username
)
.textFieldStyle(.roundedBorder)
.padding(10)

SwiftUI 的 TextField 视图默认没有样式，也就是说在屏幕上呈现的作用是彻底空白的。但一般项目中都会给其加上一个灰色圆角边框，以便更好的显示。

这种作用就能够经过 .textFieldStyle(.roundedBorder)) 来完成。

字符数量约束

示例代码：

struct TextFieldD: View {
    @State private var username: String = ""
    let textLimit = 5
    var body: some View {
        TextField(
            "请输入用户名",
            text: $username
        )
        .onReceive(Just(username)) { _ in
            limit(textLimit)
        }
    }
    func limit(_ max: Int) {
        if username.count > max {
            username = String(username.prefix(max))
        }
    }
}

对输入框进行字符数量约束需求借助 Combine 框架。在 onReceive 函数里对输入内容进行字符长度监听，当字符长度大于 textLimit 时，则会执行 limit 函数，对输入内容进行裁剪以符合需求。

自适应高度

示例代码：

TextField(
    "请输入用户名",
    text: $username,
    axis: .horizontal
)
.padding(10)
.textFieldStyle(.roundedBorder)

SwiftUI 的 TextField 完成自适应高度是非常简略的，将 axis 赋值 .vertical 即可。还能够赋值 lineLimit 来操控最多显示几行。

但需求留意的是，axis 仅支持 iOS 16 及以上版本，关于 14 和 15 的系统，能够经过 TextEditor 来完成：

TextEditor(text: $username)

iOS 13 的系统只能经过 UIKit 的 UITextView 来完成了。

增加删去按钮

示例代码：

TextField(
    "请输入用户名",
    text: $username
)
.onAppear {
    UITextField.appearance().clearButtonMode = .whileEditing
}
.padding(10)
.textFieldStyle(.roundedBorder)

Textfield 默认是没有相关修饰符让咱们传一个枚举就能够显示删去按钮的，所以咱们只能在 .onAppear 里边经过指定 UITextField 的外观来曲线救国了。