自定义文本字段在 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。相反，您可以将其分别应用于每个元素。