无法在带有叠加层的文本字段中输入内容

Question

我正在尝试设计一个文本字段，我在其中应用了

.overlay

修饰符以具有背景。该文本字段位于带有图像和文本字段本身的 HStack 内。应用

.overlay

来设置背景会导致无法输入内容，而没有背景则可以。这是源代码：

ZStack {
                Color.black // This sets the entire background to black
                    .ignoresSafeArea()
                VStack(spacing: 0){
                    
                    Spacer()
                    
                    HStack {
                        Image(systemName: "person.text.rectangle.fill")
                            .foregroundStyle(.white)
                        TextField("Display Name...", text: $name)
                            .foregroundStyle(.white)
                        Spacer()
                    }
                    .padding()
                    .overlay(
                        RoundedRectangle(cornerRadius: 10)
                            .foregroundStyle(.gray).opacity(0.2) // Change the color to gray
                    )
                    .padding()
                    
                }
                
            }```

Image of view:


  [1]: https://i.sstatic.net/ZNVQlfmS.png

Answer 1

将

.overlay(...)

更改为

.background(...)