List为何阻断SwiftUI的matchedGeometryEffect动画？如何解决？

我想实现一个简单动画：列表中选中项添加灰色背景，背景能从原选中位置平滑过渡到新选中项位置。我用matchedGeometryEffect让SwiftUI匹配不同状态下的背景视图，但把按钮包裹在List里后，动画就失效了。只要把按钮放入List就会触发这个问题，请问List为何会阻断该动画？有没有解决办法？

示例代码：

struct AnimationButtonStyle: ButtonStyle {
    
    var isCurrent: Bool
    var animationNamespace: Namespace.ID
    
    var backgroundView: some View {
        Color.gray
        .cornerRadius(8)
        .matchedGeometryEffect(id: "Shape", in: animationNamespace)
    }
    
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background(
                isCurrent ? backgroundView : nil
            )
            .opacity(configuration.isPressed ? 0.5 : 1.0)
    }
}

struct ContentView: View {
    enum cases: String, CaseIterable {
        case foo = "Foo"
        case bar = "Barrrrrr"
        case bat = "Battttttttttttttt"
    }
    
    @Namespace private var animationNamespace
    @State var animatedCurrentCase: cases = .foo
    @State var currentCase: cases = .foo
    @State var isAnimating: Bool = false
    
    var body: some View {
        VStack {
            // Without the list this animation will work
            List {
                Section {
                    VStack(alignment: .leading, spacing: 0) {
                        ForEach(Array(cases.allCases.enumerated()), id: \.offset) { index, theCase in
                            var isCurrent: Bool { theCase == animatedCurrentCase }
                            Button {
                                isAnimating = true
                                Task { @MainActor in
                                    animatedCurrentCase = theCase
                                    try? await Task.sleep(nanoseconds: 200_000_000)
                                    currentCase = theCase
                                    isAnimating = false
                                }
                            } label: {
                                Label {
                                    Text(theCase.rawValue)
                                } icon: {
                                    VStack(alignment: .leading) {
                                        Text("\(index)")
                                    }
                                    .frame(width: isCurrent ? 16 + 4 : 16)
                                }
                            }
                            .disabled(isAnimating)
                            .buttonStyle(AnimationButtonStyle(isCurrent: isCurrent, animationNamespace: animationNamespace))
                            .animation(.smooth, value: animatedCurrentCase)
                        }
                    }
                }
            }
            Spacer().frame(height: 10)
            Text("Selected: \(currentCase.rawValue)")
                .font(.title)
        }
        .padding()
    }
}

为什么List会阻断动画？ #

SwiftUI的List是基于UIKit的UITableView（iOS）或AppKit的NSTableView（macOS）封装的控件，它的核心特性是单元格复用——系统会回收不在屏幕内的单元格，重新给新出现的列表项使用。这种复用机制会导致你绑定了matchedGeometryEffect的背景视图被频繁销毁、重建，打断了SwiftUI对视图状态的追踪，自然就没法完成平滑的过渡动画。

另外，List内部有自己的层级结构和默认背景样式，也会干扰自定义背景视图的动画逻辑，让matchedGeometryEffect无法正确匹配前后两个状态的视图。

解决办法 #

要绕开List的复用问题，我们需要把过渡背景从列表项内部抽出来，作为独立的叠加层放在List上方，通过获取列表项的位置信息来控制背景的移动和缩放。具体实现如下：

修改后的代码：

struct AnimationButtonStyle: ButtonStyle {
    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .opacity(configuration.isPressed ? 0.5 : 1.0)
    }
}

struct ContentView: View {
    enum CaseItem: String, CaseIterable {
        case foo = "Foo"
        case bar = "Barrrrrr"
        case bat = "Battttttttttttttt"
    }
    
    @Namespace private var animationNamespace
    @State var selectedCase: CaseItem = .foo
    @State var isAnimating: Bool = false
    // 存储每个列表项的位置和尺寸
    @State private var itemFrames: [CaseItem: CGRect] = [:]
    
    var body: some View {
        VStack {
            ZStack(alignment: .topLeading) {
                List {
                    Section {
                        VStack(alignment: .leading, spacing: 0) {
                            ForEach(Array(CaseItem.allCases.enumerated()), id: \.offset) { index, item in
                                Button {
                                    guard !isAnimating else { return }
                                    isAnimating = true
                                    // 直接用withAnimation包裹状态变化
                                    withAnimation(.smooth) {
                                        selectedCase = item
                                    }
                                    // 动画结束后恢复可点击状态
                                    DispatchQueue.main.asyncAfter(deadline: .now() + 0.2) {
                                        isAnimating = false
                                    }
                                } label: {
                                    Label {
                                        Text(item.rawValue)
                                    } icon: {
                                        VStack(alignment: .leading) {
                                            Text("\(index)")
                                        }
                                        .frame(width: selectedCase == item ? 20 : 16)
                                    }
                                }
                                .disabled(isAnimating)
                                .buttonStyle(AnimationButtonStyle())
                                // 通过GeometryReader获取当前列表项的位置信息
                                .background(
                                    GeometryReader { geo in
                                        Color.clear
                                            .preference(
                                                key: ItemFramePreferenceKey.self,
                                                value: [item: geo.frame(in: .named("ListCoordinateSpace"))]
                                            )
                                    }
                                )
                            }
                        }
                    }
                }
                // 定义专属坐标空间，确保位置计算准确
                .coordinateSpace(name: "ListCoordinateSpace")
                // 接收每个列表项的位置信息
                .onPreferenceChange(ItemFramePreferenceKey.self) { newValue in
                    itemFrames.merge(newValue) { $1 }
                }
                
                // 独立的过渡背景视图
                Color.gray
                    .cornerRadius(8)
                    // 根据选中项的尺寸调整自身大小
                    .frame(
                        width: itemFrames[selectedCase]?.width,
                        height: itemFrames[selectedCase]?.height
                    )
                    // 根据选中项的位置调整自身位置
                    .position(
                        x: (itemFrames[selectedCase]?.minX ?? 0) + (itemFrames[selectedCase]?.width ?? 0)/2,
                        y: (itemFrames[selectedCase]?.minY ?? 0) + (itemFrames[selectedCase]?.height ?? 0)/2
                    )
                    // 给位置和尺寸变化添加动画
                    .animation(.smooth, value: selectedCase)
                    // 不让背景视图拦截按钮点击
                    .allowsHitTesting(false)
            }
            
            Spacer().frame(height: 10)
            Text("选中: \(selectedCase.rawValue)")
                .font(.title)
        }
        .padding()
    }
}

// 自定义PreferenceKey，用于传递列表项的位置信息
struct ItemFramePreferenceKey: PreferenceKey {
    static var defaultValue: [ContentView.CaseItem: CGRect] = [:]
    
    static func reduce(value: inout [ContentView.CaseItem: CGRect], nextValue: () -> [ContentView.CaseItem: CGRect]) {
        value.merge(nextValue()) { $1 }
    }
}

关键改动说明： #

1. 移除按钮内的背景视图：把过渡背景从按钮样式中移出，避免被List的单元格复用影响。
2. 获取列表项位置：用GeometryReader和自定义PreferenceKey收集每个列表项的位置和尺寸，传递给上层的背景视图。
3. 独立背景动画：背景视图根据选中项的位置信息动态调整自身的位置和尺寸，添加动画后就能实现平滑过渡。
4. 简化状态管理：去掉了多余的animatedCurrentCase，直接用selectedCase控制动画逻辑，代码更简洁。

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