Swift UI 完全开发(7)文本框
强烈安利有条件的朋友,去京东搜索购买《Swift UI 完全开发》原书,原作者由浅入深,字字珠玑,从真实开发角度介绍了SwiftUI的使用,完整阅读带来的裨益与收获远胜于草草的读完浓缩版博客,个人安利。
本章节将介绍三种常用的文本框,TextField
文本框(常用于App的登陆、搜索等需要键入文字的场景)、SecureField
安全文本框(用于密码输入的场景)、TexEditor
多行文本框(需要输入长文字时使用)。
从(6)开始,将不再按照原书顺序介绍,只提供本人阅读后浓缩后代码,并对代码进行逐行解释。
对应《Swift UI 完全开发》原书第7章
- 第一章 第一个SwiftUI项目
- 第二章 Text文字使用
- 第三章 Image图片使用
- 第四章 Stack布局容器使用
- 第五章 Swift语法入门
- 第六章 Button按钮使用
- 第七章 文本输入框使用
P.S. 文章内容为个人阅读后认为的重点,顺序与原书存在不一致。有任何疑问欢迎评论。
7.1 TextField
与SecureField
——登陆界面案例
-
用
var
关键字声明了一个String
类型的变量phoneText与pwdText,并且用到了属性包装器@State
。@State
属性包装器是用于控制视图行为可变状态的变量,在视图中更新和重新渲染内容,以响应用户交互或者应用程序状态的改变,简单的说哦,就是当我们声明的变量phoneText内容发生变化时,在适应phoneText变量的地方就可以实时更新内容。
-
TextField
的使用,需要设置两部分的内容:一是文本库的占位文字,即文本库未输入时展示的提示文字;二是绑定的内容,当我们创建一个TextField文本框时,它提示需要输入的内容为<#Binding<String>#>
,即需要绑定一个String类型的变量。这里我们绑定的参数变量为使用@State
属性包装器声明的变量phoneText。同理在下方创建一个SecureField
安全文本框, -
修饰符格式化文本库。
- 下方代码中使用
.textFieldStyle()
文本框样式修饰符,设置TextField
文本框为RoundedborderTextFieldStyle()
圆角边框文本框样式,然后使.padding()
填充修饰符将四周撑开空白区域,如此便呈现了上面的样式。 - 下方代码中使用
.textContentType()
文字内容修饰符是设置我们希望文本框输入的内容类型,如emailAddress邮箱地址、URL链接地址或者telephoneNumber电话号码。 .keyboardType()
键盘类型修饰符,是当我们在真机或者模拟器中使用点击文本框时,设置唤起的键盘的类型。此处假设电话号码登陆,设置类型为numberPad
数字键盘.disableAutocorrection()
禁止自动纠正修饰符时一个与日常使用习惯逻辑相反的修饰符,接收Bool类型的值,当值为true时,则唤起软键盘的时候就会自动禁用软键盘在输入时,ios自动纠正输入的内容。(就是键盘上方的预测性建议栏,用这个能关掉)
struct SwiftUIButton: View { @State var phoneText: String = "" @State var pwdText: String = "" var body: some View { VStack{ Spacer() VStack(spacing:60){ Image("ApplicationIcon") .resizable() .aspectRatio(contentMode: .fit) .frame(width: 140) .cornerRadius(16) VStack(spacing:20){ // 文本框 TextField("请输入手机号", text: $phoneText) .textFieldStyle(RoundedBorderTextFieldStyle()) .textContentType(.telephoneNumber) .keyboardType(.numberPad) .disableAutocorrection(true) // 安全文本框 SecureField("请输入密码", text: $pwdText) .textFieldStyle(RoundedBorderTextFieldStyle()) } } Spacer() Spacer() } .padding() } }
- 下方代码中使用
7.2 搜索框案例
-
下方代码没有使用
TextField
文本框自带的样式修饰符,而是自定义了文本框的样式,使用.padding()
修饰符"撑开"四周的控件,其中的.padding(.horizontal, 25)
是为了让文本框的样式留出左右两边的位置,便于后面放置一个“搜索”图标。 -
常规地使用
.background()
背景颜色修饰符、.cornerRadius()
圆角修饰符美化下样式;然后使用.overlay()
层叠修饰符在搜索框视图的基础上叠加一个"搜索"图标,这和ZStack
堆叠修饰符的使用方式类似;最后使用.padding()
修饰符控制正哥视图留有一点的边界。
struct SearchBarview: View {
@State var inputText:String = ""
var body: some View {
TextField("搜索内容",text: $inputText)
.padding(10)
.padding(.horizontal, 25)
.background(Color(.systemGray6))
.cornerRadius(8)
.overlay(
Image(systemName: "magnifyingglass")
.foregroundColor(.gray)
.frame(minWidth: /*@START_MENU_TOKEN@*/0/*@END_MENU_TOKEN@*/,maxWidth: .infinity,alignment: .leading).padding(.leading, 8 )
)
.padding()
}
}
7.2 TextEditor
多行文本框
- 创建一个新的 SwiftUI View 文件,命名为“SwiftUITextEditor”
- 实现基本的
TextEditor
多行文本框的代码。依然声明用于绑定的文本库的String
类型参数,然后使用TextEditor
基本控件的代码,由于TextEditor
多行文本框没有placeholder
参数,这就意味着我们没有相应的办法设置多行文本框的提示文字,而且TextEditor
多行文本框也没有类似于.textFieldStyle()
文本库样式修饰符,但我们可以采用ZStack
层叠布局容器模拟一个提示文字,有文字时隐藏提示文字,没有键入文字时展示提示文字。提示文字部分,通过判断绑定输入的文字inputtext
来决定是否显示,文字样式通过.foregroundColor()
背景色修饰符为提示文字修饰颜色。ZStack
层叠布局容器中的TextEditor
多行文本框与提示文字的布局关系,我们采用对齐方式参数,设置为顶部左对齐。 - 最后边框部分,我们使用
.overlay()
层叠修饰符在ZStack
层叠布局容器上堆叠一层矩形边框,完成后调整正哥视图的大小和边距。
struct SwiftUITextEditor: View {
@State var inputText : String = ""
var body: some View {
ZStack(alignment: .topLeading){
//多行文本框
TextEditor(text: $inputText)
.padding()
//提示文字
if inputText.isEmpty {
Text("请输入内容...")
.foregroundColor(Color(UIColor.placeholderText))
.padding(25)
}
}
//边框
.overlay(
RoundedRectangle(cornerRadius: 8)
.stroke(Color(UIColor.placeholderText), lineWidth: 2)
)
.padding()
.frame(height: 320)
}
}