Swift UI 完全开发（7）文本框

wwyyxhzzy

已于 2024-05-03 12:41:43 修改

阅读量468

点赞数 25

分类专栏： SwifitUI完全开发文章标签： swift ui ssh swiftui ios

于 2024-05-02 19:24:42 首次发布

本文链接：https://blog.csdn.net/m0_73405692/article/details/138398073

版权

SwifitUI完全开发专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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)
        
    }
}