SwiftUI背景色切换动画在NavigationView+ScrollView中消失的差异解析

单独使用按钮时，点击能带动画切换背景色：

struct ContentView: View {
    @State var isSelected = false

    var body: some View {
        Button {
            isSelected.toggle()
        } label: {
            Text("Hello")
                .padding(50)
                .background(isSelected ? Color.red : Color.green)
        }
        .buttonStyle(NoHighlightButtonStyle())
    }
}

但将按钮嵌套进NavigationView和ScrollView后，背景色切换的动画消失了：

struct ContentView: View {
    @State var isSelected = false

    var body: some View {
        NavigationView {
            ScrollView {
                Button {
                    isSelected.toggle()
                } label: {
                    Text("Hello")
                        .padding(50)
                        .background(isSelected ? Color.red : Color.green)
                }
                .buttonStyle(NoHighlightButtonStyle())
            }
        }
    }
}

两种场景的核心差异在于视图层级的动画环境继承：

• 单独按钮场景：按钮的视图树直接依附于根视图系统，默认动画环境会自动作用于@State变量变化引发的视图更新，因此background的颜色切换会自动获得隐式动画。
• 嵌套场景：ScrollView为优化滚动性能，默认会禁用子视图的隐式动画；同时NavigationView的视图层级会进一步隔离动画环境，导致@State变量切换时，background的颜色变化无法自动触发隐式动画。

补充说明：自定义的NoHighlightButtonStyle仅用于移除按钮点击高亮效果，与动画消失无关，其实现如下：

struct NoHighlightButtonStyle: ButtonStyle {
    func makeBody(configuration: ButtonStyle.Configuration) -> some View {
        configuration.label
    }
}

若要在嵌套场景恢复动画，可通过两种方式实现：

• 在状态切换时用withAnimation包裹：

Button {
    withAnimation {
        isSelected.toggle()
    }
}

• 给background显式添加animation修饰符：

.background(isSelected ? Color.red : Color.green)
.animation(.default, value: isSelected)

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