SwiftUI中GridRow点击显示Popover的异常问题求助

问题根源 #

GridRow的视图修饰符会被传递给它的每个子视图，导致你添加的onTapGesture和popover被每个子视图重复应用，进而触发多次弹窗或异常行为。

可行解决方案：绑定透明背景实现整行交互 #

通过给GridRow添加一个占据整行空间的透明背景视图，将手势和Popover绑定到这个背景上，就能避免修饰符扩散到子视图，实现点击整行触发弹窗的需求。

修改后的代码示例：

struct MyList: View {
    @State private var showPopover = false

    var body: some View {
        Grid {
            GridRow {
                Text("Hello")
                Text("World")
            }
            // 用透明背景占据整行，绑定手势与Popover
            .background(
                Color.clear
                    .onTapGesture {
                        showPopover = true
                    }
                    .popover(isPresented: $showPopover) {
                        Text("This is a popover!")
                    }
            )
            // 整行覆盖层效果（可选）
            .overlay(Rectangle().fill(Color.red.opacity(0.2)))
        }
    }
}

方案说明 #

• Color.clear作为背景会自动填充整个GridRow的布局空间，不会干扰原有子视图的显示与布局。
• 将交互逻辑绑定到这个透明背景上，确保只有一个触发源，彻底解决子视图重复响应的问题。
• 若需要给整行添加视觉效果（比如示例中的红色半透明层），直接给GridRow添加overlay即可，该修饰符会作用于整个行容器而非子视图。

多行场景的扩展优化 #

如果需要处理多个GridRow，可以将逻辑封装成自定义修饰符，减少重复代码：

extension GridRow {
    func rowPopover<Content: View>(isPresented: Binding<Bool>, @ViewBuilder content: @escaping () -> Content) -> some View {
        self.background(
            Color.clear
                .onTapGesture {
                    isPresented.wrappedValue = true
                }
                .popover(isPresented: isPresented, content: content)
        )
    }
}

// 使用示例
GridRow {
    Text("Row 1 Col 1")
    Text("Row 1 Col 2")
}
.rowPopover(isPresented: $showPopover1) {
    Text("Popover for Row 1")
}

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