前言

xcode 13.3
iOS 15.4

1、TextField 明文显示的输入框

文字输入框，相当于OC的UITextField

1.1、TextFieldStyle

TextField 有自己的风格，给我们提供了一些选项:
1、PlainTextFieldStyle:

.textFieldStyle(.plain)

A text field style with no decoration.
没有装饰的文本字段样式。

2、DefaultTextFieldStyle: TextField 的默认样式，在 iOS 中，这匹配了 PlainTextFieldStyle。

.textFieldStyle(.automatic)

The default text field style, based on the text field's context. The default style represents the recommended style based on the current platform and the text field's context within the view hierarchy.
默认文本字段样式，基于文本字段的上下文。 默认样式表示基于 视图层次结构中当前平台和文本字段的上下文。
3、RoundedBorderTextFieldStyle

.textFieldStyle(.roundedBorder)

A text field style with a system-defined rounded border.
具有系统定义的圆形边框的文本字段样式。

TextField("请输入手机号", text: $userName)
    .textFieldStyle(.plain)
TextField("请输入手机号", text: $userName)
    .textFieldStyle(.automatic)
TextField("请输入手机号", text: $userName)
    .textFieldStyle(.roundedBorder)

在这里插入图片描述

1.2、TextField 的基础设置

struct Login: View { 
    @State var userName: String = ""
      
    var body: some View {
        //userName 为空展示前面 placeholder，否则展示userName数据
        TextField("请输入手机号", text: $userName)
            //设置键盘类型
            .keyboardType(.phonePad)
            //设置对齐方式
            .multilineTextAlignment(.leading)
            //设置光标颜色，默认纯白色光标
            .accentColor(.purple)
            //输入字体颜色
            .foregroundColor(.red)
            //字体大小
            .font(.system(size: 14))
            //frame
            .frame(height:38)
            //padding
            .padding(.horizontal, 26)
            //输入框风格
            .textFieldStyle(.automatic)
    }
}

2、SecureField 密文显示的输入框

密码输入框，相当于OC的UITextField，除了名称，其余设置和上面的TextField设置均相同，就不在一一添加

SecureField("请输入密码", text: $passworld)

在这里插入图片描述

3、TextEditor 多行输入框

TextEditor 基础设置

struct Login: View { 
    @State var content: String = ""
    
    init() {
        //TextEditor 是由UIKit中的UITextView演变而来，
        //因此可以再init方法中，通过UITextView修改TextEditor的外观属性。
        UITextView.appearance().backgroundColor = .clear
    }
    
    var body: some View {
        
        TextEditor(text: $content)
            //设置键盘类型
            .keyboardType(.phonePad)
            //设置对齐方式
            .multilineTextAlignment(.leading)
            //设置光标颜色，默认纯白色光标
            .accentColor(.purple)
            //输入字体颜色
            .foregroundColor(.red)
            //字体大小
            .font(.system(size: 14))
            //背景
            .background(.gray.opacity(0.3))
            //frame
            .frame(height:300)
            //圆角
            .cornerRadius(5)
            //padding
            .padding() 
    } 
}

在这里插入图片描述

4 输入监听

struct YLLoginBind: View {
    @State var text: String = ""

    var body: some View {
        let binding = Binding<String>(get: {
            self.text
        }, set: {
            self.text = $0
        })

        return VStack {
            TextField("Search Location", text: binding)
            Text("Current location: \(text)")
        }
    }
}

总结：
1、输入框的输入闪动光标SwiftUI默认白色，而不是Swift和OC的蓝色