自定义 TextField 在 SwiftUI 代码中的 VStack 中不起作用

Posted 2023-02-23

【中文标题】自定义 TextField 在 SwiftUI 代码中的 VStack 中不起作用

【英文标题】：Customized TextField not working in VStack in SwiftUI code

【发布时间】：2020-02-02 14:21:11

【问题描述】：

我自定义了文本字段并将其放在 VStack 中，但是当我单击文本字段时它不起作用。 但如果我把它放在 VStack 之外，效果会很好。 请检查代码并给出解决此问题的任何答案。 提前致谢。

struct LoginView: View 

    @State var email = ""
    @State var password = ""

    var body: some View 
        NavigationView 
            VStack 

                // email
                CustomTextField(placeholder: "Working", text: $email, icon: Image(systemName: "envelope.fill"))

                VStack 
                    Text("SIGN IN")
                        .font(.title)
                        .padding()
                        .padding(.top, 16)

                    // email
                    CustomTextField(placeholder: "Not working", text: $email, icon: Image(systemName: "envelope.fill"))


                    // password
                    CustomTextField(placeholder: "Password", text: $password, icon: Image(systemName: "lock.fill"))
                
                .background(Color.blue)
                .shadow(color: Color.gray, radius: 5)
                .padding(.init(top: 40, leading: 40, bottom: 0, trailing: 40))

            
            .background(Color(AppColors.shared.themeColor))
            .edgesIgnoringSafeArea(.all)
         // navigation
        .navigationBarHidden(true)
        .navigationBarBackButtonHidden(true)
        .navigationBarTitle("")
     // body
 // end view

这里是自定义文本字段 =====

struct CustomTextField: View 

    var placeholder: String
    @Binding var text: String
    var icon: Image
    var height: CGFloat = 45

    var body: some View 
        HStack(spacing: 10) 
            TextField(placeholder, text: $text)
                .multilineTextAlignment(.leading)
                .accentColor(Color.black)
                .foregroundColor(Color.black)
                .padding(.init(top: 0, leading: 20, bottom: 0, trailing: 0))

            icon.padding(.init(top: 0, leading: 0, bottom: 0, trailing: 24))
        
        .background(Color.red)
        .frame(height: height)
        .clipShape(RoundedRectangle(cornerRadius: height/2))
        .overlay(RoundedRectangle(cornerRadius: height/2).stroke(Color.secondary, lineWidth: 1))
        .padding(.init(top: 0, leading: 40, bottom: 0, trailing: 40))

    

【参考方案1】：

您不应将.shadow() 应用于VStack。相反，您可以将其分别应用于每个元素。

【讨论】：

感谢您的回答，它有效。但是在这种情况下，我怎样才能像这个屏幕那样实现盒子周围的阴影呢？ prnt.sc/qwiam0

您应该使用ZStack 来查看卡片