NavigationStack弹出初始路径项时单元格取消选中动画异常的原因与修复

测试代码 #

import SwiftUI

enum Route
{
    case first
    case second
}

@main struct NavigatorApp : App
{
    @State private var path: [Route] = [.first]

    var body: some Scene
    {
        WindowGroup
        {
            NavigationStack(path: $path)
            {
                StartView()
            }
        }
    }
}

struct StartView : View
{
    var body: some View
    {
        Form
        {
            Section
            {
                NavigationLink(value: Route.first)
                {
                    Text("Go First")
                }
            }
        }
        .navigationTitle("Start")
        .navigationDestination(for: Route.self)
        { route in
            switch route
            {
            case .first:
                FirstView()

            case .second:
                SecondView()
            }
        }
    }
}

struct FirstView : View
{
    var body: some View
    {
        Form
        {
            Section
            {
                NavigationLink(value: Route.second)
                {
                    Text("Go Second")
                }
            }
        }
        .navigationTitle("First")
    }
}

struct SecondView : View
{
    @State private var hasOption: Bool = false

    var body: some View
    {
        Form
        {
            Section
            {
                Toggle("Some Option", isOn: $hasOption)
            }
        }
        .navigationTitle("Second")
    }
}

异常现象 #

首次从非空的NavigationStack路径返回至StartView时，「Go First」单元格的取消选中动画异常：背景从灰色直接跳变至白色，无平滑过渡；正常情况下该背景应平滑从灰变白。

异常原因 #

问题出在初始路径path被直接设置为非空数组[.first]：NavigationStack初始化时会立刻加载FirstView，而StartView中对应的NavigationLink没有经过正常的选中状态绑定流程。当首次返回时，SwiftUI无法正确触发预设的选中态过渡动画——因为该链接的选中状态没有被系统正确追踪和初始化。

修复方案 #

方案一：延迟初始化初始路径 #

不在App初始化时直接给path赋值，通过onAppear延迟设置，让NavigationStack先完成StartView的渲染，再加载目标页面：

@main struct NavigatorApp : App
{
    @State private var path: [Route] = []

    var body: some Scene
    {
        WindowGroup
        {
            NavigationStack(path: $path)
            {
                StartView()
                    .onAppear {
                        DispatchQueue.main.async {
                            path = [.first]
                        }
                    }
            }
        }
    }
}

方案二：手动管理NavigationLink的选中状态 #

给StartView中的NavigationLink添加显式的选中状态绑定，确保系统能正确追踪状态变化：

struct StartView : View
{
    @Binding var path: [Route]
    private var isFirstSelected: Bool { path.contains(.first) }

    var body: some View
    {
        Form
        {
            Section
            {
                NavigationLink(value: Route.first, isActive: $isFirstSelected)
                {
                    Text("Go First")
                }
            }
        }
        .navigationTitle("Start")
        .navigationDestination(for: Route.self)
        { route in
            switch route
            {
            case .first:
                FirstView()

            case .second:
                SecondView()
            }
        }
    }
}

// 同时在App中传递path绑定
@main struct NavigatorApp : App
{
    @State private var path: [Route] = [.first]

    var body: some Scene
    {
        WindowGroup
        {
            NavigationStack(path: $path)
            {
                StartView(path: $path)
            }
        }
    }
}

方案三：调整初始路径逻辑 #

避免初始路径包含StartView内链接对应的路由，比如默认设置空路径，让用户主动点击进入FirstView，从根源上规避异常场景。

内容的提问来源于stack exchange，提问作者meaning-matters