SwiftUI NavigationLink选中高亮失效：NavigationStack(path:)场景问题

问题重现 #

当使用带path参数的NavigationStack，配合NavigationLink(_ titleKey:value:)与navigationDestination(for:destination)实现页面跳转时，List内的行点击后不会出现系统默认的高亮选中状态，如下代码在模拟器和真机均无高亮效果：

import SwiftUI

struct ExperimentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List {
                NavigationLink("Page", value: 0)
                NavigationLink("Page", value: 1)
                NavigationLink("Page", value: 2)
            }
            .navigationTitle("List")
            .navigationDestination(for: Int.self) { int in
                Text(int.description)
            }
        }
    }
}

而使用不带path的NavigationStack搭配NavigationLink(_ titleKey:destination:)时，高亮功能正常。

解决方法 #

1. 手动模拟高亮效果 #

通过状态变量控制行背景色，模拟系统的高亮时长：

import SwiftUI

struct ExperimentView: View {
    @State private var path = NavigationPath()
    @State private var highlightedRow: Int?

    var body: some View {
        NavigationStack(path: $path) {
            List {
                ForEach(0..<3) { int in
                    NavigationLink("Page", value: int)
                        .listRowBackground(highlightedRow == int ? Color(UIColor.systemGray5) : Color.clear)
                        .onTapGesture {
                            highlightedRow = int
                            path.append(int)
                            // 匹配系统高亮的短暂显示时长
                            DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
                                highlightedRow = nil
                            }
                        }
                }
            }
            .navigationTitle("List")
            .navigationDestination(for: Int.self) { int in
                Text(int.description)
            }
        }
    }
}

2. 自定义NavigationLink标签并调整按钮样式 #

将NavigationLink内容放入label闭包，配合buttonStyle确保点击区域正确，同时保留高亮：

import SwiftUI

struct ExperimentView: View {
    @State private var path = NavigationPath()

    var body: some View {
        NavigationStack(path: $path) {
            List {
                ForEach(0..<3) { int in
                    NavigationLink(value: int) {
                        Text("Page")
                            .frame(maxWidth: .infinity, alignment: .leading)
                            .contentShape(Rectangle())
                    }
                    .buttonStyle(.plain)
                    .listRowBackground(Color(UIColor.systemGray5).opacity(0.0))
                }
            }
            .navigationTitle("List")
            .navigationDestination(for: Int.self) { int in
                Text(int.description)
            }
        }
    }
}

3. 利用List的selection绑定 #

如果场景支持，通过List的selection绑定状态变量来实现高亮：

import SwiftUI

struct ExperimentView: View {
    @State private var path = NavigationPath()
    @State private var selectedItem: Int?

    var body: some View {
        NavigationStack(path: $path) {
            List(selection: $selectedItem) {
                ForEach(0..<3) { int in
                    NavigationLink("Page", value: int)
                        .tag(int)
                }
            }
            .navigationTitle("List")
            .navigationDestination(for: Int.self) { int in
                Text(int.description)
            }
            .onChange(of: selectedItem) { _, newValue in
                guard let newValue = newValue else { return }
                path.append(newValue)
                // 延迟取消选中，模拟系统高亮
                DispatchQueue.main.asyncAfter(deadline: .now() + 0.15) {
                    selectedItem = nil
                }
            }
        }
    }
}

原因说明 #

这是SwiftUI在NavigationStack结合path和value类型NavigationLink时的已知行为，系统未自动为List行添加默认的高亮样式，需要通过手动方式补充。

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