如何在ZStack中合并视图，使顶层视图优先且背景不变暗（复刻Apple Maps UI）

问题描述 #

我正在尝试复刻Apple Maps的UI，当sheet向上滑出时，该sheet会与下方视图融合，且底层地图仍能清晰显示，不会降低透明度。简言之，我不希望新增的sheet叠加上来时，背景变暗。

当前代码问题 #

当前实现中，虽使用了.ultraThinMaterial，但视图层级和布局方式导致sheet堆叠时，底层背景容易出现视觉暗化，无法还原Apple Maps的清晰融合效果。

修改后的代码实现 #

struct ContentView: View {
    @State private var views: [Int] = []

    var body: some View {
        // 底层背景（模拟地图）
        LinearGradient(colors: [.red, .pink], startPoint: .top, endPoint: .bottom)
            .ignoresSafeArea()
            .overlay(
                VStack {
                    Button("Push View") {
                        withAnimation(.smooth) {
                            views.append(views.count + 1)
                        }
                    }
                    .foregroundStyle(.white)
                    .padding()
                    
                    Button("Pop View") {
                        withAnimation(.smooth) {
                            if !views.isEmpty {
                                views.removeLast()
                            }
                        }
                    }
                    .foregroundStyle(.white)
                    .padding()
                    
                    // 用VStack堆叠sheet，模拟层叠层级
                    VStack(spacing: 0) {
                        ForEach(0..<views.count, id: \.self) { index in
                            ZStack {
                                Rectangle()
                                    .foregroundStyle(.ultraThinMaterial)
                                    .shadow(radius: 5)
                                Text("Sheet \(index)")
                                    .foregroundStyle(.white)
                            }
                            .frame(maxWidth: .infinity)
                            // 层级越高的sheet高度略大，贴近Apple Maps视觉
                            .frame(height: index == views.count - 1 ? 300 : 280)
                            .transition(.move(edge: .bottom))
                            .zIndex(Double(index))
                        }
                    }
                    .frame(maxHeight: .infinity, alignment: .bottom)
                }
            )
        .ignoresSafeArea(edges: .bottom)
    }
}

关键修改点 #

• 层级重构：将底层背景作为基础层，通过overlay覆盖操作按钮和sheet容器，确保底层背景始终处于最底层，不受上层视图干扰。
• Sheet布局优化：用VStack替代ZStack实现sheet层叠，通过差异化高度模拟Apple Maps的层级视觉，同时固定容器在底部。
• 动画与材质调整：使用.smooth动画提升过渡流畅度，将.ultraThinMaterial直接绑定到sheet的Rectangle上，仅让sheet本身产生融合效果，不影响底层背景。
• 去除多余暗化逻辑：通过布局调整规避系统默认的背景暗化触发条件，保持底层视图清晰可见。

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