SwiftUI中添加.overlay修饰符后TextField无法输入的问题

你遇到的问题是因为overlay修饰符会在HStack的上层绘制圆角矩形，这个形状默认会拦截所有点击交互，导致下方的TextField无法获取焦点输入。

给你两种可行的解决办法：

方法1：禁用Overlay形状的点击测试 #

给overlay里的RoundedRectangle添加.allowsHitTesting(false)，让它不拦截点击事件：

.overlay(
    RoundedRectangle(cornerRadius: 10)
        .foregroundStyle(.gray).opacity(0.2)
        .allowsHitTesting(false) // 关闭点击测试，让下层视图响应交互
)

方法2：用Background代替Overlay（更推荐） #

background修饰符会把形状绘制在视图的底层，完全不会遮挡上层的交互元素，是实现背景样式的更合理方式：

.background(
    RoundedRectangle(cornerRadius: 10)
        .foregroundStyle(.gray).opacity(0.2)
)

修改后的完整代码示例：

ZStack {
    Color.black
        .ignoresSafeArea()
    VStack(spacing: 0){
        Spacer()
        
        HStack {
            Image(systemName: "person.text.rectangle.fill")
                .foregroundStyle(.white)
            TextField("Display Name...", text: $name)
                .foregroundStyle(.white)
            Spacer()
        }
        .padding()
        .background(
            RoundedRectangle(cornerRadius: 10)
                .foregroundStyle(.gray).opacity(0.2)
        )
        .padding()
        
    }
}

内容的提问来源于stack exchange，提问作者landandev