使用 SwiftUI 在 MacOS 中的多列 TableViews

Posted 2023-02-18

【中文标题】使用 SwiftUI 在 MacOS 中的多列 TableViews

【英文标题】：Multi Column TableViews in MacOS using SwiftUI

【发布时间】：2020-02-25 06:16:23

【问题描述】：

我一直在用 SWiftUI 进行一些试验，但似乎根本找不到任何关于如何使用 SWiftUI 创建多列 TableView 的信息，就像在 NSTableView 中一样。我设法找到的所有示例都显示了单列数据。 Apple 的文档甚至指定 SwiftUI List 结构用于单列显示数据行。对于 MacOS 上的应用来说，这是一个非常基本的数据结构，但似乎在任何地方都没有提及它！

有人可以解释一下吗？我想它还没有准备好，但仍然......

【问题讨论】：

列交换和调整大小、标题、通过单击标题中的排序按钮对行进行排序等。MacOS 表格视图比简单的列表要复杂得多。

我认为目前仍然有必要使用NSViewRepresentable。有什么新消息吗？

不，没有新信息。你说的对，缺乏 MacOS 的例子——几乎不存在。

你知道如何在 SwiftUI 中使用 NSTableView 了吗？

【参考方案1】：

您可以创建一个 HStack，然后在两个 VStack 之间设置一个分隔符，您可以在其中放置不同的数据列。它看起来像这样：

List 
    HStack 
        VStack 
            //Column 1 Data
        
    
    Divider()
    VStack 
        //Column 2 Data
    

然后重复此操作，无论需要多少列数据。

【讨论】：

嗯，是的，但它看起来和感觉都很好。没有列标题或列交换、排序等。最好暂时使用真实的，并希望今年 WWDC 之后有更好的东西可用。我对完全没有提及它感到更加惊讶 - 实际上在任何地方都很好。

【参考方案2】：

现在可以从 macOS 12 到 Table。

【参考方案3】：

macOS 12+ (Monterey) 更新

在 macOS Monterey 中，NSTableView 现在可以用Table 包裹。此外，Table 可以支持带有关键路径和尾随闭包的TableColumns。

struct ContentView: View 
  @State private var characters = StoryCharacter.previewData

  var body: some View 
    Table(characters) 
      TableColumn("?")  CharacterIcon($0) 
        .width(20)
      TableColumn("Villain")  Text($0.isVillain ? "Villain" : "Hero") 
        .width(40)
      TableColumn("Name", value: \.name)
      TableColumn("Powers", value: \.powers)