75142913在线留言
【SwiftUI基础篇】11 输入控件TextField(单行)与SecureField、TextEditor(多行文本)_IOS开发_网络人

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

Kwok 发表于:2021-04-03 13:03:41 点击:12 评论: 0

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

与用户交互,我们需要配合数据流,如果你还不知道什么是SwiftUI的数据流,可以参考这篇内容:http://www.neter8.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修改行间距或字间距。

除非注明,网络人的文章均为原创,转载请以链接形式标明本文地址:http://www.neter8.com/ios/125.html
标签:输入控件Kwok最后编辑于:2021-04-03 13:03:59
0
感谢打赏!

《【SwiftUI基础篇】11 输入控件TextField(单行)与SecureField、TextEditor(多行文本)》的网友评论(0)

本站推荐阅读

热门点击文章