TextField in SwiftUI

TextField是一个很重要的组件，有关于由用户输入的操作内容时简直都会用到它。比如咱们的登录注册，首要用于承受输入的用户名暗码等

以下图片中是一个最简略的TextField。

TextField("Placeholder", text: $name)
                .textFieldStyle(.roundedBorder)
                .padding(.horizontal)

代码也很简略，只需求一个绑定的String类型值，用户接收用户输入的值，placeholder便是图片上灰色的字体显现的部分，这部分首要作用是给用户提示用的。

下面就多给出几个不同的参数TextField，来一同看看。

上图相似一个登录界面

struct TextFiledSample: View {
    @State var name: String = ""
    @State var pwd: String = ""
    @State var title: String = ""
    @State var note: String = ""
    @State private var numberFormatter: NumberFormatter = {
        var nf = NumberFormatter()
        nf.numberStyle = .decimal
        return nf
    }()
    var body: some View {
        ZStack {
            Color.yellow.edgesIgnoringSafeArea(.all)
            VStack(spacing: 20) {
                Text("Log in")
                    .padding([.top])
                    .font(.title)
                    .foregroundColor(.black)
                TextField("username", text: $name)
                    .textFieldStyle(.roundedBorder)
                    .padding(.horizontal)
                    .submitLabel(.continue)
                    .onSubmit {
                        // submit
                    }
                    .onChange(of: name) { name in
                        print(name)
                    }
                SecureField("Password", text: $pwd)
                    .textFieldStyle(.roundedBorder)
                    .padding(.horizontal)
                    .submitLabel(.done)
                TextField("phone number", text: $title)
                    .padding(.horizontal)
                    .textFieldStyle(.roundedBorder)
                    .keyboardType(.numberPad)
                TextField("Notes", text: $note, axis: .vertical)
                    .padding(.horizontal)
                    .textFieldStyle(.roundedBorder)
                    .lineLimit(3...)
                HStack {
                    Button {
                        submit()
                    } label: {
                        Text("Login")
                            .font(.headline)
                            .foregroundColor(Color.yellow)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(Color.black)
                            .cornerRadius(10)
                    }
                }
                .padding(.horizontal)
                Spacer()
            }
        }
    }
    func submit() {
        print(pwd)
        print(name)
    }
}

代码其实也很简略，咱们可以设置TextField的样式，总共有两个内置的样式

1. **plain
2. roundedBorder
   **一个有边框，一个没有边框

安全输入框 -> SecureField

当你在开发中，需求用到躲藏暗码时，就可以直接使用SecureField来完成这个需求。

校验+disabled

有时候咱们的需求是，当咱们输入的值满意条件时，才可以点击提交Button。那么咱们改如何做呢？

首要，咱们提供一个验证方法，都是很简略的验证。当然在你正式开发时千万不要这么简略的验证。

func validata() -> Bool {
        return name.count > 6 && pwd.count > 6
    }

其次，咱们稍微改造一下Button的参数

Button {
                        submit()
                    } label: {
                        Text("Login")
                            .font(.headline)
                            .foregroundColor(Color.yellow)
                            .frame(maxWidth: .infinity)
                            .padding()
                            .background(validata() ? Color.black : Color.gray)
                            .cornerRadius(10)
                    }
                    .disabled(!validata())

这里咱们使用验证方法返回一个Bool值，当条件满意时咱们就会把Button的背景色变成黑色，不然便是灰色，而且条件满意时button才是enable状态

iOS16多行TextField

值得注意的是，在iOS16以后，TextField支持来多行输入

@available(iOS 16.0, macOS 13.0, tvOS 16.0, watchOS 9.0, *)
    public init(
titleKey: LocalizedStringKey, 
text: Binding<String>, axis: Axis
)

TextField("Notes", text: $note, axis: .vertical)
                    .padding(.horizontal)
                    .textFieldStyle(.roundedBorder)
                    .lineLimit(3...)

以上代码就可以支持多行输入，效果如下：

以上便是TextField的介绍

我们有什么看法呢？欢迎留言讨论。
公众号：RobotPBQ