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 的外观来曲线救国了。