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

Question

我自定义了文本字段并将其放在 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))

    }
}

Answer 1

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