SwiftUI中能否实现带基于值的NavigationLink的多选列表？

问题 #

开发SwiftUI资源管理器应用时，为带SectionedFetchRequest的列表添加多选支持遇到如下问题：

• 使用List(_:selection:rowContent:)搭配NavigationLink(_:value:)时，点击列表行只会触发选中操作，无法跳转到详情视图
• 改用NavigationLink(_:destination:)时，导航跳转和多选功能均正常工作

想确认这是已知bug还是用法遗漏。

无法正常工作的简化代码 #

struct TestView: View {

    let fruits = ["Apple", "Banana", "Cherry"]
    
    @State private var selection: Set<String> = Set()
    
    var body: some View {
        NavigationStack {
            List(fruits, id: \.self, selection: $selection) { fruit in
                NavigationLink(fruit, value: fruit)
            }
            .navigationDestination(for: String.self) { string in
                Text(string)
            }
            .toolbar {
                EditButton()
            }
        }
    }

}

可正常工作的简化代码 #

struct TestView: View {

    let fruits = ["Apple", "Banana", "Cherry"]
    
    @State private var selection: Set<String> = Set()
    
    var body: some View {
        NavigationStack {
            List(fruits, id: \.self, selection: $selection) { fruit in
                NavigationLink(fruit) {
                    Text(fruit)
                }
            }
            .toolbar {
                EditButton()
            }
        }
    }

}

解答 #

这不是bug，是SwiftUI的默认行为：当列表绑定了selection开启多选功能后，NavigationLink(_:value:)的点击事件会被列表的选中逻辑优先拦截，导致导航跳转失效；而NavigationLink(_:destination:)因直接绑定目标视图，不受该拦截逻辑影响。

以下是几种可行的解决方案：

方案1：为NavigationLink添加同步手势 #

通过simultaneousGesture手动触发导航跳转，同时保留列表选中能力：

struct TestView: View {
    let fruits = ["Apple", "Banana", "Cherry"]
    @State private var selection: Set<String> = Set()
    @State private var path = NavigationPath()
    
    var body: some View {
        NavigationStack(path: $path) {
            List(fruits, id: \.self, selection: $selection) { fruit in
                NavigationLink(fruit, value: fruit)
                    .simultaneousGesture(
                        TapGesture().onEnded {
                            path.append(fruit)
                        }
                    )
            }
            .navigationDestination(for: String.self) { string in
                Text(string)
            }
            .toolbar {
                EditButton()
            }
        }
    }
}

方案2：区分编辑/非编辑模式 #

遵循iOS交互习惯，编辑模式下仅保留选中功能，非编辑模式恢复导航跳转：

struct TestView: View {
    let fruits = ["Apple", "Banana", "Cherry"]
    @State private var selection: Set<String> = Set()
    @Environment(\.editMode) private var editMode
    
    var body: some View {
        NavigationStack {
            List(fruits, id: \.self, selection: $selection) { fruit in
                if editMode?.wrappedValue == .active {
                    Text(fruit)
                } else {
                    NavigationLink(fruit, value: fruit)
                }
            }
            .navigationDestination(for: String.self) { string in
                Text(string)
            }
            .toolbar {
                EditButton()
            }
        }
    }
}

方案3：用Button替代NavigationLink手动控制导航 #

通过按钮触发状态变更，间接控制导航跳转：

struct TestView: View {
    let fruits = ["Apple", "Banana", "Cherry"]
    @State private var selection: Set<String> = Set()
    @State private var isNavigating = false
    @State private var targetFruit: String?
    
    var body: some View {
        NavigationStack {
            List(fruits, id: \.self, selection: $selection) { fruit in
                Button(fruit) {
                    targetFruit = fruit
                    isNavigating = true
                }
            }
            .navigationDestination(isPresented: $isNavigating) {
                if let fruit = targetFruit {
                    Text(fruit)
                }
            }
            .toolbar {
                EditButton()
            }
        }
    }
}

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