ios - 为什么第一个 EditText 视图不能正常工作,但它下面的视图却可以?
问题描述
如果用户在第一个 EditText 中输入文本,然后单击返回,它将清除所有文本。但是,如果用户在第二个 EditText 中输入文本并单击返回,则不会发生任何事情。第一个 EditText 也不会正确显示文本颜色,它将文本颜色显示为黑色,而其余的则正确显示为白色。
注册屏幕
struct SignUpScreen: View {
@State
var firstName: String = ""
@State
var lastName: String = ""
@State
var birthday: String = ""
@State
var number: String = ""
@State
var email: String = ""
@State
var password: String = ""
@State
var confirmPassword: String = ""
@ObservedObject
var viewModel: SignUpViewModel = SignUpViewModel()
var body: some View {
ZStack {
VStack {
VClearBackground()
Spacer()
}
ScrollView {
VStack(alignment: .leading) {
Group {
PreHeaderText(header: "Get Started")
.alignmentGuide(.leading, computeValue: {d in
d[.leading]
})
.padding(EdgeInsets.init(top: 32, leading: 0, bottom: 0, trailing: 0))
HeaderText(header: "Create Account")
EditText(hint: "John", text: $viewModel.firstName, label: "FIRST NAME", textContentType: UITextContentType.name)
EditText(hint: "Doe", text: $lastName, label: "LAST NAME", textContentType: UITextContentType.name)
EditText(hint: "01/01/2001", text: $birthday, label: "BIRTHDAY")
EditText(hint: "(123) 456-7890)", text: $number, label: "MOBILE NUMBER", textContentType: UITextContentType.telephoneNumber, keyboardType: UIKeyboardType.phonePad)
EditText(hint: "email@exmaple.com", text: $email, label: "EMAIL", textContentType: UITextContentType.emailAddress)
EditText(hint: "********", text: $password, label: "PASSWORD", textContentType: UITextContentType.newPassword)
EditText(hint: "********", text: $confirmPassword, label: "CONFIRM PASSWORD", textContentType: UITextContentType.newPassword)
}
Group {
if self.viewModel.error != nil {
HStack {
Spacer()
Text(viewModel.error ?? "")
.foregroundColor(ColorTheme.error.color)
Spacer()
}
.padding()
}
HStack {
Spacer()
VowerButton(text: "Submit") {
self.viewModel.signUp(firstName: self.viewModel.firstName, lastName: self.lastName, email: self.email, birthday: self.birthday, phoneNumber: self.number, password: self.password, confirmPassword: self.confirmPassword)
}
Spacer()
}
.padding()
HStack {
Spacer()
NavigationLink(destination: LoginScreen(), isActive: $viewModel.goToLogin) {
CtaText(text: "Have an account?", cta: "Login") {
self.viewModel.onGoToLoginClicked()
}
}
.padding()
Spacer()
}
Spacer()
}
}
}
.padding(EdgeInsets.init(top: 16, leading: 16, bottom: 16, trailing: 16))
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .leading)
}
.background(LinearGradient(gradient: Gradient(colors: [.black, ColorTheme.brandPurple.color]), startPoint: .top, endPoint: .bottom))
.edgesIgnoringSafeArea(.all)
}
}
编辑文本
struct EditText: View {
var hint: String
@Binding
var text: String
var label: String = ""
var defaultValue = ""
var textContentType: UITextContentType? = .none
var keyboardType: UIKeyboardType = .default
private func initializeDefaultValue() {
DispatchQueue.main.async {
self.text = self.defaultValue
}
}
var body: some View {
initializeDefaultValue()
return VStack(alignment: .leading) {
Text(label).font(.system(size: 12)).bold()
.foregroundColor(ColorTheme.text.color)
HStack {
TextField(hint, text: $text)
.lineLimit(1)
.textContentType(textContentType)
.keyboardType(keyboardType)
.foregroundColor(ColorTheme.text.color)
}
Divider().background(Color(ColorTheme.brandBlue.value))
}
.padding(EdgeInsets.init(top: 12, leading: 0, bottom: 8, trailing: 0))
}
}
解决方案
这里是
EditText(hint: "John", text: $viewModel.firstName, label: "FIRST NAME", textContentType: UITextContentType.name)
EditText(hint: "Doe", text: $lastName, label: "LAST NAME", textContentType: UITextContentType.name)
如您所见,第一个文本字段绑定到视图模型(未提供,所以我不能说那里出了什么问题),但第二个文本字段绑定到内部视图状态。
正如我所看到的firstName
内部视图状态,所以可能的意图是(和实际修复)只是使用它
EditText(hint: "John", text: $firstName, label: "FIRST NAME", textContentType: UITextContentType.name)
推荐阅读
- haskell - Haskell 中 (a -> Bool) 和 (a -> a -> Bool) 的区别?
- go - 使用 go/ast 类型断言语法
- jquery - JQuery cycle2 next prev 按钮在 Magento 2 中不滚动
- java - 从 YAML 文件中解析对象列表
- java - 在 oncreateview 中使用异步任务
- python - 在 VSCode 中使用 Flake8 ...?
- python - 如何在 Python3 中使用 opencv 从文件缓冲区中读取文件
- c - if/else 语句未验证数据
- vue.js - 在单独的组件中进一步向下跳转页面
- java - 从 intelliJ 平台 IDE 中检索首选项