问题分析 #

你的核心问题有两个：

1. 返回动画被列表遮挡：触发返回时ListView的opacity立刻恢复为1，导致列表覆盖了正在执行收缩动画的DetailView；
2. "Multiple inserted views in matched geometry group"警告：DetailView显示时，列表中所有Cell仍存在，同一个matchedGeometryEffect的id对应了两个视图（列表Cell和详情页视图），从而触发警告。

同时你不能直接隐藏整个列表，否则会导致列表重新加载并回到顶部，破坏动画连贯性。下面是针对性的解决方案：

解决方案步骤 #

1. 修改ListView：仅保留被点击的Cell，隐藏其他项

这样既避免多视图匹配的错误，又能保留列表的滚动位置（LazyVStack不会销毁已加载视图，只是隐藏未被点击的项）。

struct ListView: View {
    var testData: [Exercise]
    var namespace: Namespace.ID
    @Binding var tappedCellIndex: Int?
    var body: some View {
        ScrollView {
            LazyVStack {
                ForEach(testData.indices) { index in
                    Cell(exercise: testData[index], index: index, namespace: namespace)
                        // 仅显示未触发详情页，或当前被点击的Cell
                        .opacity(tappedCellIndex == nil || tappedCellIndex == index ? 1 : 0)
                        .onTapGesture {
                            withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                                self.tappedCellIndex = index
                            }
                        }
                }
            }
        }
    }
}

2. 调整ContentView的层级与过渡逻辑

移除ListView的opacity控制，改用zIndex确保DetailView在动画期间始终处于上层，同时避免列表被完全隐藏导致的滚动位置丢失。

struct ContentView: View {
    let testData = [Exercise(title: "Hallo"), Exercise(title: "Bankdrücken"), Exercise(title: "Squats"), Exercise(title: "Seitheben"), Exercise(title: "Klimmzüge"), Exercise(title: "Bizepscurls"), Exercise(title: "Dips"), Exercise(title: "Aufroller"), Exercise(title: "Muscle"), Exercise(title: "Dragon Flies"), Exercise(title: "Hallo"), Exercise(title: "Bankdrücken"), Exercise(title: "Squats"), Exercise(title: "Seitheben"), Exercise(title: "Klimmzüge"), Exercise(title: "Bizepscurls"), Exercise(title: "Dips"), Exercise(title: "Aufroller"), Exercise(title: "Muscle"), Exercise(title: "Dragon Flies")]
    @State var tappedCellIndex: Int? = nil
    @Namespace var namespace
    var body: some View {
        ZStack {
            ListView(testData: testData, namespace: namespace, tappedCellIndex: $tappedCellIndex)
                // 详情页显示时，将列表置于底层
                .zIndex(tappedCellIndex == nil ? 1 : 0)
            
            if let tappedCellIndex = tappedCellIndex {
                DetailView(exercise: testData[tappedCellIndex], selectedIndex: $tappedCellIndex, namespace: namespace)
                    .zIndex(1)
                    .transition(.identity) // 移除默认过渡，避免与matchedGeometryEffect冲突
            }
        }
    }
}

3. 优化DetailView的背景动画衔接

确保详情页背景的圆角动画与Cell背景完全匹配，避免动画断层：

struct DetailView: View {
    var exercise: Exercise
    @Binding var selectedIndex: Int?
    var namespace: Namespace.ID
    var body: some View {
        VStack(alignment: .leading) {
            HStack {
                Text(exercise.title)
                    .matchedGeometryEffect(id: exercise.id, in: namespace)
                    .font(.title)
                    .frame(maxWidth: .infinity, alignment: .leading)
                    .foregroundColor(Color.white)
                    .padding(.top, 12)
                Spacer()
                Button {
                    withAnimation(.spring(response: 0.6, dampingFraction: 0.8)) {
                        selectedIndex = nil
                    }
                } label: {
                    Text("Klicke hier!")
                        .foregroundColor(.white)
                }
            }
            Spacer()
        }
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .padding()
        .background(
            RoundedRectangle(cornerRadius: selectedIndex != nil ? 30 : 5, style: .continuous)
                .matchedGeometryEffect(id: exercise.id + "background", in: namespace)
                .foregroundColor(Color.gray)
        )
    }
}

方案原理说明 #

• 仅保留被点击Cell：彻底避免同一个id对应多个视图的问题，消除多视图匹配警告；
• zIndex层级控制：确保详情页在动画全过程中始终处于列表之上，不会被遮挡；
• 保留滚动位置：仅隐藏未被点击的Cell，而非销毁整个列表，LazyVStack会维持原有滚动状态，返回动画完成后其他Cell自动恢复显示，体验流畅。

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