Colocar visualizações dentro de uma lista impede que matchedGeometryEffect anime a geometria correspondente entre os estados

Quando extraí tudo VStackem um View, a animação simplesmente funciona. Não consigo explicar exatamente por que isso funciona, mas parece que tem algo a ver com como o SwiftUI atualiza as visualizações em um List.

Em qualquer caso, é quase sempre bom dividir suas opiniões em partes menores.

Aqui eu extraí um ButtonsView, e usei isso na lista. Eu movi 2 dos 3 estados dentro de ButtonsView, assim como o @Namespace, mas você pode alterá-los totalmente para @Bindings e fazer com que a visualização pai os passe.

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()
    }
}

Eu sugeriria remover todo o código extra para animar o caso selecionado, porque é desnecessário. Especificamente:

• Remova as variáveis ​​de estado animatedCurrentCasee isAnimating.
• Remova o Task.
• Remova o .disabledmodificador.
• Remova o .animationmodificador.

Se você então withAnimationexecutar a atualização dentro do fechamento do botão, funcionará.

Outras sugestões:

• Use letonde puder, em vez de var. Em particular, as propriedades em AnimationButtonStylecan use let.

• .cornerRadiusestá obsoleto, use .clipShapecom um RoundedRectangleem vez disso, ou apenas coloque um RoundedRectangleem segundo plano.

• O .backgroundmodificador que você estava usando também está obsoleto. Sugira uma refatoração usando um trailing closure e if-statement.

Aqui está o exemplo atualizado:

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()
    }
}