macOS SwiftUI中如何将Table行用作NavigationLink？

我正在构建一个采用双栏NavigationSplitView的macOS应用，侧边栏展示分类，主区域是Item的Table组件。需求是双击Table中的行（对应单个Item）时，跳转到该Item的详情页DetailView。

之前用List组件时，有很多NavigationLink配合.navigationDestination的示例，但找不到适用于SwiftUI Table的可行方案。我尝试在Table的ForEach循环中添加NavigationLink，代码如下：

struct TableView: View {
  @State private var items: [Item] = []

  @State private var sorting = [KeyPathComparator(\Item.model)]
  @State private var selection: Item.ID?
  
  var body: some View {
    VStack{
      Table(of: Item.self, selection: $selection, sortOrder: $sorting) {
        TableColumn("Make",  value: \.make)
        TableColumn("Model", value: \.model)
        TableColumn("Date",  value: \.date)
      } rows: {
        ForEach(items) { item in
          TableRow(item)
          NavigationLink(destination: DetailView(itemId: selection))
        }
      }
   }
}

但这种写法不被允许，添加NavigationLink后编译器报错："No exact matches in reference to static method 'buildExpression'"。

解决方案 #

SwiftUI的Table组件和List结构不同，无法直接在TableRow旁嵌套NavigationLink，可以通过以下两种方式实现需求：

方法1：双击手势+选中状态+导航目标 #

通过监听行的双击手势更新选中项，配合.navigationDestination实现跳转，完全贴合双击触发的需求：

struct TableView: View {
  @State private var items: [Item] = []
  @State private var sorting = [KeyPathComparator(\Item.model)]
  @State private var selectedItem: Item?
  
  var body: some View {
    NavigationStack { // 外层需包裹NavigationStack（macOS 13+）
      Table(of: Item.self, sortOrder: $sorting) {
        TableColumn("Make",  value: \.make)
        TableColumn("Model", value: \.model)
        TableColumn("Date",  value: \.date)
      } rows: {
        ForEach(items) { item in
          TableRow(item)
            .onTapGesture(count: 2) {
              selectedItem = item
            }
        }
      }
      .navigationDestination(item: $selectedItem) { item in
        DetailView(itemId: item.id)
      }
    }
  }
}

方法2：TableRow嵌套NavigationLink（隐藏样式） #

如果希望复用类似List的导航逻辑，可将TableRow嵌套在NavigationLink内，并移除默认按钮样式，点击/双击都会触发跳转：

struct TableView: View {
  @State private var items: [Item] = []
  @State private var sorting = [KeyPathComparator(\Item.model)]
  
  var body: some View {
    NavigationStack {
      Table(of: Item.self, sortOrder: $sorting) {
        TableColumn("Make",  value: \.make)
        TableColumn("Model", value: \.model)
        TableColumn("Date",  value: \.date)
      } rows: {
        ForEach(items) { item in
          NavigationLink(value: item) {
            TableRow(item)
          }
          .buttonStyle(.plain) // 移除NavigationLink默认样式
        }
      }
      .navigationDestination(for: Item.self) { item in
        DetailView(itemId: item.id)
      }
    }
  }
}

关键说明 #

• 两种方案都依赖NavigationStack（macOS 13及以上支持），.navigationDestination需要导航栈环境才能生效。
• 若部署目标为macOS 12及以下，需改用NavigationView并调整导航逻辑，建议优先升级至新导航栈API。

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