代码之家 › 专栏 › 技术社区 › Joshua Maza

如何在swiftUI中以编程方式设置安全文本字段和普通文本字段

swiftui swift

Joshua Maza · 技术社区 · 3 年前

SwiftUI有两种不同形式的文本字段,一种是隐藏输入的SecureField,另一种是不隐藏输入的TextField。有没有一种方法可以代替创建两个单独的视图,创建一个视图,该视图可以接受一个参数来创建两种类型,同时尽可能少地重复代码?

1 回复 | 直到 3 年前

lorem ipsum 3 年前

你只要做一个 View 所有你想要的代码 SecureTextField 还有 TextField 那么你所要做的就是打电话给 HybridTextField 无论你在哪里需要它。

import SwiftUI
struct HybridTextFieldUsageView: View {
    @State var password: String = "password"
    @State var viewSecure: Bool = true
    var body: some View {
        //Use this anywhere in your code
        HybridTextField(text: $password, titleKey: "password")
    }
}
///Contains all the code for the Secure and regular TextFields
struct HybridTextField: View {
    @Binding var text: String
    @State var isSecure: Bool = true
    var titleKey: String
    var body: some View {
        HStack{
            Group{
                if isSecure{
                    SecureField(titleKey, text: $text)
                    
                }else{
                    TextField(titleKey, text: $text)
                }
            }.textFieldStyle(.roundedBorder)
                .animation(.easeInOut(duration: 0.2), value: isSecure)
            //Add any common modifiers here so they dont have to be repeated for each Field
            Button(action: {
                isSecure.toggle()
            }, label: {
                Image(systemName: !isSecure ? "eye.slash" : "eye" )
            })
        }//Add any modifiers shared by the Button and the Fields here
    }
}

struct HybridTextField_Previews: PreviewProvider {
    static var previews: some View {
        HybridTextFieldUsageView()
    }
}

-2

Joshua Maza 3 年前

在视图主体中,您可以根据需要使用三元组创建正确的文本字段,而无需使用巨大的if/else块:

(self.isSecure ? AnyView(SecureField(placeholder, text: $value)) : AnyView(TextField(placeholder, text: $value)))

这将返回一个可以使用运算符的视图,如果要创建自定义文本输入,这将非常有用。例如,如果我们必须对每种文本字段执行两次,那么下面的内容将非常痛苦。在实际视图主体中使用三元组可以避免出现两个巨大的if/else块。

    VStack {
        ZStack(alignment: .leading) {
            Text(placeholder)
                .foregroundColor(Color(.placeholderText))
                .offset(y: $value.wrappedValue.isEmpty ? 0 : -25)
                .scaleEffect($value.wrappedValue.isEmpty ? 1 : 0.8, anchor: .leading)
            (self.isSecure ? AnyView(SecureField(placeholder, text: $value)) : AnyView(TextField(placeholder, text: $value)))
                .onChange(of: self.value) { newValue in
                    if self.onChange(newValue) != true {
                        self.value = previousValue
                    }
                    DispatchQueue.main.async {
                        self.previousValue = newValue
                    }
                }
        }
        .padding(.top, 15)
        .animation(.easeInOut(duration: 0.2))
        Divider()
         .frame(height: 1)
         .padding(.horizontal, 30)
         .background(Color.black)
    }