将视图放入列表中会阻止匹配的GeometryEffect 在状态之间对匹配的几何图形进行动画处理

当我将整个动画提取VStack到单独的 中时View，动画就可以正常工作了。我无法准确解释为什么会这样，但这似乎与 SwiftUI 如何更新 中的视图有关List。

无论如何，将您的观点分成更小的部分几乎总是一件好事。

这里我提取了一个ButtonsView，并将其用于列表中。我已将 3 个状态中的 2 个ButtonsView以及移入@Namespace，但您完全可以将它们更改为@Binding并让父视图将它们传递进去。

struct AnimationButtonStyle: ButtonStyle {
    
    var isCurrent: Bool
    var animationNamespace: Namespace.ID
    
    var backgroundView: some View {
        Color.gray
            .clipShape(RoundedRectangle(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 ButtonsView: View {
    enum cases: String, CaseIterable {
        case foo = "Foo"
        case bar = "Barrrrrr"
        case bat = "Battttttttttttttt"
    }
    
    @Namespace private var animationNamespace
    @State private var animatedCurrentCase: cases = .foo
    @Binding var currentCase: cases
    @State var isAnimating = false
    
    var body: some View {
        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)
            }
        }
        .onAppear {
            animatedCurrentCase = currentCase
        }
    }
}

struct ContentView: View {
    @State var currentCase: ButtonsView.cases = .bar
    
    var body: some View {
        VStack {
            List {
                Section {
                    ButtonsView(currentCase: $currentCase)
                }
            }
            Spacer().frame(height: 10)
            Text("Selected: \(currentCase.rawValue)")
                .font(.title)
        }
        .padding()
    }
}

我建议删除所有用于为选定案例设置动画的额外代码，因为这些代码是不必要的。具体来说：

• 删除状态变量animatedCurrentCase和isAnimating。
• 删除Task。
• 移除.disabled修饰符。
• 移除.animation修饰符。

如果您随后使用它withAnimation在按钮闭包内执行更新，它就会起作用。

其他建议：

• let尽可能使用，而不是var。特别是 中的属性AnimationButtonStyle可以使用let。

• .cornerRadius已被弃用，请.clipShape改用RoundedRectangle，或将放在RoundedRectangle后台。

• 您使用的修饰符.background也已弃用。建议使用尾随闭包和 if 语句进行重构。

以下是更新后的示例：

struct AnimationButtonStyle: ButtonStyle {
    let isCurrent: Bool
    let animationNamespace: Namespace.ID

    var backgroundView: some View {
        RoundedRectangle(cornerRadius: 8)
            .fill(.gray)
            .matchedGeometryEffect(id: "Shape", in: animationNamespace)
    }

    func makeBody(configuration: Configuration) -> some View {
        configuration.label
            .background {
                if isCurrent {
                    backgroundView
                }
            }
            .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 currentCase: cases = .foo

    var body: some View {
        VStack {
            List {
                Section {
                    VStack(alignment: .leading, spacing: 0) {
                        ForEach(Array(cases.allCases.enumerated()), id: \.offset) { index, theCase in
                            let isCurrent = theCase == currentCase
                            Button {
                                withAnimation(.smooth) {
                                    currentCase = theCase
                                }
                            } label: {
                                Label {
                                    Text(theCase.rawValue)
                                } icon: {
                                    VStack(alignment: .leading) {
                                        Text("\(index)")
                                    }
                                    .frame(width: isCurrent ? 16 + 4 : 16)
                                }
                            }
                            .buttonStyle(
                                AnimationButtonStyle(
                                    isCurrent: isCurrent,
                                    animationNamespace: animationNamespace
                                )
                            )
                        }
                    }
                }
            }
            Spacer().frame(height: 10)
            Text("Selected: \(currentCase.rawValue)")
                .font(.title)
        }
        .padding()
    }
}