You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

SwiftUI:NavigationStack内视图appear过渡失效问题求助

修复后的代码

import SwiftUI

struct ListView: View {
    @State var selected: Int? = nil
    
    var body: some View {
        List(0..<4) { index in
            HStack {
                if selected == index {
                    Image(systemName: "checkmark.circle.fill")
                        .transition(.move(edge: .leading).combined(with: .opacity))
                }
                Text("\(index)")
                Spacer()
            }
            .contentShape(Rectangle())
            .onTapGesture {
                withAnimation(.default) {
                    selected = index
                }
            }
        }
    }
}

struct AnimationBroken_Previews: PreviewProvider {
    static var previews: some View {
        NavigationStack {
            ListView()
        }
    }
}

struct AnimationWorks_Previews: PreviewProvider {
    static var previews: some View {
        ListView()
    }
}

问题原因与修复逻辑

  • 原代码通过.animation修饰符绑定动画,在NavigationStack嵌套List的场景下,List的单元格布局容器会干扰动画上下文传递,导致条件渲染的Image无法触发appear过渡。
  • 将状态变更操作包裹在withAnimation中,能明确为所有受状态影响的视图提供统一的动画上下文,确保Image的过渡效果在NavigationStack中也能正常工作。
  • Text过渡不受影响是因为它始终存在于视图结构中,仅涉及布局调整,而Image是动态添加/移除的,对动画上下文的完整性要求更高。

内容的提问来源于stack exchange,提问作者Joshua Breeden

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.19 11:01:03