清除文本字段后占位符不显示SwiftUI答案

【问题标题】：Placeholder not showing after textfield is cleared SwiftUI清除文本字段后占位符不显示SwiftUI
【发布时间】：2020-07-08 20:13:45
【问题描述】：

我有 2 个文本字段...

 TextField("Username", text: $viewModel.usernameStore){}
        .padding(.all, 8)
        .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
        .cornerRadius(4.0)
        .padding(.bottom, 5)


    SecureField("Password", text: $viewModel.passwordStore){}
        .padding(.all, 8)
        .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
        .cornerRadius(4.0)
        .padding(.bottom, 5)

还有一个可以清除它们的函数...

    func clearCredentials(){
    $viewModel.usernameStore.wrappedValue = ""
    $viewModel.passwordStore.wrappedValue = ""
 }

当调用函数并清除文本字段时，密码的占位符会重新填充，但用户名的占位符不会，它只会被清除。

我假设这与密码是安全字段有关。清除后如何让用户名重新填充占位符文本？

【问题讨论】：

标签： swift textfield placeholder

【解决方案1】：

我认为这是一个 SwiftUI 错误，因为如果您在另一个字段中点击，占位符会再次出现...

我为您准备了另一个解决方案（这是 Apple 清除文本字段的标准方式，因此用户知道如何处理它...

看看这个：

struct CustomTextField: UIViewRepresentable {

    class Coordinator: NSObject, UITextFieldDelegate {

        @Binding var text: String

        init(text: Binding<String>) {
            _text = text
        }

        func textFieldDidChangeSelection(_ textField: UITextField) {
            text = textField.text ?? ""
        }
    }

    @State var secure : Bool
    @State var initialText : String
    @Binding var text: String
    @State var placeholder : String

    func makeUIView(context: UIViewRepresentableContext<CustomTextField>) -> UITextField {
        let textField = UITextField(frame: .zero)
        textField.placeholder = placeholder
        textField.delegate = context.coordinator
        textField.text = initialText
        textField.clearButtonMode = .always
        textField.isSecureTextEntry = secure
        return textField
    }

    func makeCoordinator() -> CustomTextField.Coordinator {
        return Coordinator(text: $text)
    }

    func updateUIView(_ uiView: UITextField, context: UIViewRepresentableContext<CustomTextField>) {
        uiView.text = text
        uiView.placeholder = placeholder
    }
}

struct ContentView: View {

    @State var username : String = ""
    @State var password : String = ""

    func clearCredentials(){
        username = ""
        password = ""

    }

    var body: some View {
        VStack {

            CustomTextField(secure: false, initialText: "", text: $username, placeholder: "Username")
                .fixedSize()
                .padding(.all, 8)
                .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
                .cornerRadius(4.0)
                .padding(.bottom, 5)


             CustomTextField(secure: true, initialText: "", text: $password , placeholder: "Password")
                .fixedSize()
                .padding(.all, 8)
                .background(Color(red:0.5, green: 0.5, blue: 0.5, opacity: 0.3))
                .cornerRadius(4.0)
                .padding(.bottom, 5)
            Button(action: {
                self.clearCredentials()
            }) {
                Text("Clear credentials")
            }

        }.padding()
    }
}

【讨论】：

好吧，这对文本字段中的 x（清除）很好。

【解决方案2】：

SwiftUI 的 TextField 支持占位符文本，就像 UITextField 所做的一样 - 当文本字段为空时，灰色文本会显示在文本字段中，或者使用提示（“输入您的密码”）或显示一些示例数据。

要设置占位符，请将其作为文本字段的初始化程序的一部分传入，如下所示：

struct ContentView: View {
    @State private var emailAddress = ""

    var body: some View {
        TextField("johnnyappleseed@apple.com", text: $emailAddress)
            .textFieldStyle(RoundedBorderTextFieldStyle())
            .padding()
    }
}

【讨论】：