【SwiftUI基础篇】11 输入控件TextField(单行)与SecureField、TextEditor(多行文本)

SwiftUI学到后面的感觉是越来越像某个Web的前端框架，Web要有的，SwiftUI也都有，而且安全、兼容等更优秀。

与用户交互，我们需要配合数据流，如果你还不知道什么是SwiftUI的数据流，可以参考这篇内容：http://www.55mx.com/ios/114.html

一、TextField 单行文本输入

 TextField 负责单行的文本输入。除去传入描述信息和绑定的字符串Text 之外，还可以传入 onEditingChanged 和 onCommit 这两个回调函数，前者会在用户开始编辑和结束编辑的时候被调用，后者则是会在用户点击回车的时候被调用。

var body: some View {
    VStack {
        TextField("用户名", text: $username,
                onEditingChanged: { isEditing in
                    self.isEditing = isEditing
                }, onCommit: {
                    validate(name: username)
                })
        .autocapitalization(.none)//设置是否将自动大写应用于此视图。UITextAutocapitalizationType.words
        .disableAutocorrection(true)//设置是否禁用此视图的自动校正。
        .border(Color(UIColor.separator))//设置边框的样式
        Text(username)
            .foregroundColor(isEditing ? .red : .blue)
    }
}

@State private var username: String = ""
@State private var isEditing = false
func validate(name: String) { print("校验用户名") }

TextField 不仅支持绑定 String。还可以利用 formatter 参数，TextField 就可以用来绑定值了：

struct FormatTextField: View {
    var body: some View {
        VStack {
            TextField("您的名字", value: $nameComponents,
                     formatter: nameFormatter,
                     onCommit: {
                        validate(components: nameComponents)
                     })
                .disableAutocorrection(true)
                .border(Color(UIColor.separator))
            Text(nameComponents.debugDescription)
        }
    }

    let nameFormatter = PersonNameComponentsFormatter()
    @State private var nameComponents = PersonNameComponents()
    func validate(components: PersonNameComponents) {
        print("校验名字")
    }
}

如果要对单行文本输入框进行样式设置，SwiftUI同样提供一个 .textFieldStyle()方法，系统内置了下面几个修改选择：

PlainTextFieldStyle 一种没有装饰的文本字段样式。

RoundedBorderTextFieldStyle 具有系统定义的圆角边框的文本字段样式。

SquareBorderTextFieldStyle 具有系统定义的正方形边框的文本字段样式（仅支持macOS 10.15+）。

DefaultTextFieldStyle 默认的文本字段样式，基于文本字段的上下文。

我们还可以通过.keyboardType(.decimalPad)定义一个输入时调用出来的键盘类型，在.numberPad和.decimalPad键盘类型告诉SwiftUI 0到9以及可选的小数点，显示的数字，但这并不能阻止从用户进入其它值。例如，如果他们有一个硬件键盘，他们可以键入自己喜欢的东西，如果他们从其他地方复制一些文本，则无论该文本内部是什么，都可以将其粘贴到文本字段中。

二、SecureField 安全文本输入

SecureField 类似 TextField，只是不明文显示输入内容，类似密码输入，创建的方式是传入一个描述的 String，再绑定一个用户输入的 String，SecureField 也支持绑定一个 onCommit 的回调函数，可以在用户完成输入的时候（例如点击回车）就自动调用这个函数。

SecureField("输入密码", text: $password) {
    handleLogin(username: username, password: password)//输入完成后调用
}
.border(Color(UIColor.separator))

SwiftUI的SecureField工作原理与常规代码几乎相同，TextField不同之处在于，出于保护隐私的目的而屏蔽了这些字符。就像一样TextField，您将提供一个占位符(*)，为用户提供输入内容的建议，并且绑定到的基础值仍然是纯字符串，因此您可以根据需要进行检查。

三、TextEditor 多行文本输入

TextEditor 是一个多行、可滚动的文本编辑 UI，通过传入文字的绑定来获取用户输入或修改的内容。注意，TextEditor 默认会使用流海（非安全区）部分，在排版的时候需要注意。您可以设置字体，根据需要更改颜色，甚至可以调整行距以及可以创建多少行。

TextEditor(text: $fullText)
    .foregroundColor(Color.gray)//输入的文字颜色
    .font(.custom("HelveticaNeue", size: 13))//字体、字号
    .lineSpacing(10)//文本行的间距

可以像修饰 Text 一样改变 TextEditor 的样式,可以用 .lineLimit, .lineSpacing, .minimumScaleFactor 等modifier修改行间距或字间距。

除非注明，网络人的文章均为原创，转载请以链接形式标明本文地址：https://www.55mx.com/post/125