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

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

  •  0
  • Joshua Maza  · 技术社区  · 3 年前

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

    1 回复  |  直到 3 年前
        1
  •  1
  •   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
  •  -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)
        }