SwiftUI：如何在过渡动画期间更新子视图？

问题场景 #

需要在处于过渡动画中的视图内更新子视图，当快速触发视图的显示/隐藏切换（过渡动画未完成时），子视图会丢失预设的过渡效果，直接跳转到最终位置。

复现代码 #

struct ContentView: View {
    @State var text = "\(Date().timeIntervalSince1970)"
    @State var isOn = true

    var body: some View {
        ZStack {
            VStack {
                if isOn {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundColor(.accentColor)

                    Text(text)
                        .transition(.move(edge: .bottom))
                }
            }
            .zIndex(1)
            .animation(.default, value: isOn)

            Color.clear
                .ignoresSafeArea()
                .overlay(alignment: .bottom) {
                    Button("Click") {
                        isOn.toggle()
                        text = isOn ? "\(Date().timeIntervalSince1970)" : "Hello, Swift!"
                    }
                }
        }
    }
}

问题现象 #

点击底部按钮可隐藏/显示Text视图，且显示时会更新Text内容。若快速点击按钮（过渡动画未完成时），Text视图会丢失move(edge: .bottom)过渡效果，直接出现在最终位置。

解决方案 #

方法1：使用withAnimation包裹所有状态更新 #

将按钮点击事件中的状态更新全部放入withAnimation闭包，确保所有状态变化都处于同一动画上下文，让SwiftUI正确处理视图过渡与内容更新：

struct ContentView: View {
    @State var text = "\(Date().timeIntervalSince1970)"
    @State var isOn = true

    var body: some View {
        ZStack {
            VStack {
                if isOn {
                    Image(systemName: "globe")
                        .imageScale(.large)
                        .foregroundColor(.accentColor)

                    Text(text)
                        .transition(.move(edge: .bottom))
                }
            }
            .zIndex(1)

            Color.clear
                .ignoresSafeArea()
                .overlay(alignment: .bottom) {
                    Button("Click") {
                        withAnimation {
                            isOn.toggle()
                            text = isOn ? "\(Date().timeIntervalSince1970)" : "Hello, Swift!"
                        }
                    }
                }
        }
    }
}

方法2：给子视图设置稳定标识 #

给Text视图添加固定的id，让SwiftUI识别到这是同一个视图的内容更新，而非新创建的视图，从而保留过渡效果：

Text(text)
    .transition(.move(edge: .bottom))
    .id("stable-text-view") // 添加稳定id

原因说明 #

原实现中，动画仅绑定到isOn状态，当快速点击按钮时，text的更新与isOn的切换同时发生，SwiftUI可能将更新后的Text视为全新视图，跳过过渡动画。通过统一动画上下文或标记视图身份，可让SwiftUI正确区分视图的显示/隐藏过渡与内容更新，确保过渡效果始终生效。

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