SwiftUI中MatchedGeometryEffect引发ZIndex异常的问题解决

核心思路是：展开详情时保留原网格中被选中的视图（维持ZStack层级），但将其标记为非源视图（isSource: false）并隐藏，同时让详情视图作为源视图，这样既不会触发多源报错，又能保证展开时的覆盖视觉效果。

完整代码示例 #

struct ColorGridDemo: View {
    let colors: [Color] = [.red, .green, .blue, .yellow]
    @State private var selectedColor: Color?
    @Namespace private var animationNamespace
    
    var body: some View {
        ZStack {
            // 2×2颜色网格
            VStack(spacing: 16) {
                HStack(spacing: 16) {
                    ForEach(colors.prefix(2), id: \.self) { color in
                        colorView(for: color)
                    }
                }
                HStack(spacing: 16) {
                    ForEach(colors.suffix(2), id: \.self) { color in
                        colorView(for: color)
                    }
                }
            }
            
            // 详情视图
            if let selected = selectedColor {
                selected
                    .matchedGeometryEffect(id: selected, in: animationNamespace, isSource: true)
                    .onTapGesture {
                        withAnimation {
                            selectedColor = nil
                        }
                    }
            }
        }
        .padding()
    }
    
    private func colorView(for color: Color) -> some View {
        color
            .frame(width: 150, height: 150)
            .matchedGeometryEffect(
                id: color,
                in: animationNamespace,
                // 选中时，原视图设为非源，避免多源冲突
                isSource: selectedColor != color
            )
            .opacity(selectedColor == color ? 0 : 1) // 选中时隐藏原视图
            .onTapGesture {
                withAnimation {
                    selectedColor = color
                }
            }
    }
}

关键细节说明 #

• isSource 动态切换：当某个颜色被选中时，原视图的isSource设为false，详情视图的isSource设为true，确保同一时间只有一个源视图，解决报错。
• 保留原视图不删除：通过opacity隐藏选中的原视图，而不是用if语句移除，这样ZStack的层级结构不变，展开时详情视图会自然覆盖其他网格视图，符合预期视觉效果。
• 动画连贯性：借助withAnimation包裹状态切换，保证展开/收起的动画流畅，且无透明过渡问题。

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