一、 本文价值与收获
(一)完本文后,您将能够作出下面的界面
(二)看完本文您将掌握的技能
- 用form搭建注册界面
- 用变量控制键盘的弹出与关闭
- 掌握@State 使用
- 掌握@Binding 的使用
二、基础知识
(一) TextField 是什么
TextField(文本框) 是SwiftUI中一种常用的信息输入控件,非常类似网页中的表单字段。当用户在TextField输入数据时,我们可以通过SwiftUI提供各种键盘限制用户当数据类型,例如数字键盘、邮件键盘、手机键盘等。和按钮一样,TextField也能响应用户操作事件。
(二)TextField如何用
受益于SwiftUI声明式代码优势,可以用非常少的代码即可完成复杂的界面制作。本小节让我们用6行代码来做个文本输入的应用。
1、应用效果
2、在Xcode里面创建个项目
3、在ContentView.Swift中复制下面代码
import SwiftUI
struct ContentView: View {
@State private var text = ""
var body: some View {
TextField("请输入", text: $text)
}
}
4、代码讲解
- @State private var text
为了获取Text输入内容,我们可以定义一个@State变量。
如果您是新手,建议先略过此部分,继续学习后面的内容。等完全掌握TextField再阅读下面的内容。参考文章:
SwiftUI 基础之@State 有什么用
SwiftUI 基础之@State @Binding @ObservedObject @EnvironmentObject区别
- TextField("type something...", text: $text)
第一个参数是文本框提示内容,第二个参数是用于收集用户输入数据的变量
(三)TextField中级用法
掌握获取用户的输入结果的方法,学会回调函数(onEditingChanged 和 onCommit)。在上面的示例中,我们创建一个带有占位符的TextField并将其绑定到状态变量。很简单,对不对? 下面我们来学习一下如何获取输入结果。
1、看看运行效果
2、在ContentView.Swift中复制下面代码
import SwiftUI
struct ContentView: View {
@State private var text = ""
var body: some View {
TextField(
"请输入",
text:$text,
onEditingChanged:{ item in print("onEditingChanged:\(item):\(self.text)")},
onCommit: {print("用户输入:\(self.text)")}
)
}
}
如您在上面的示例中看到,TextField允许我们处理onEditingChanged和onCommit事件。每当用户开始或完成编辑文本时,TextField都会调用onEditingChanged。它还传递一个描述开始或结束事件的布尔值。每当用户执行诸如按回车键之类的操作时,TextField都会调用onCommit。