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的样式,总共有两个内置的样式
- **plain
- 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