SwiftUI - 在macOS中实现多列TableView

Question

我一直在尝试使用SwiftUI进行实验，但似乎找不到有关如何使用SwiftUI创建多列TableView（就像NSTableView）的任何信息。我找到的所有示例都显示单列数据。

Apple的文档甚至指定SwiftUI List结构用于展示单列数据行。这是MacOS应用程序中非常基本的数据结构，但似乎没有任何提及！

有人能解释一下吗？我猜它可能还没有准备好，但仍然想知道。

- Peter

---

列交换和调整大小，表头，通过单击表头上的排序按钮进行行排序等功能怎么样？MacOS的表格视图比简单列表复杂得多。 - Peter

我认为目前仍然需要使用NSViewRepresentable。你有任何新的信息吗？ - Lupurus

不，没有新的信息。你说得对，MacOS缺乏示例 - 几乎不存在。 - Peter

你找到了在SwiftUI中如何使用NSTableView的方法吗？ - Lupurus

Answer 1

macOS 12+（Monterey）更新

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

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)
    }
  }
}

- Pranav Kasetti

---

这是正确的，但请记住，目前在 Monterey 中没有可编辑单元格的方法。 - Theo Lampert

Answer 2

Xcode 14.0+中的SwiftUI表格

Table是一个容器，用于呈现按行排列的数据，可以提供选择其成员并按升序或降序排序的功能。每个TableColumn结构在表格中显示每一行的视图。

以下是一段代码示例：

import SwiftUI

struct Item: Identifiable {
    var id: Int
    var item: String
    var qty: String
}

struct ContentView: View {
     
    @State var sorting = [KeyPathComparator(\Item.qty)]
    @State var selecting: Int?      
    @State var items: [Item] = [1,2,3,4,5].map {
        Item(id: $0, item: "item \($0)", qty: "qty " + String($0))
    }      
    var body: some View {            
        VStack {  
            Table(items, selection: $selecting, sortOrder: $sorting) {
                TableColumn("##", value: \.id) { entity in
                    Text("\(entity.id)").font(.title2)
                }
                TableColumn("What", value: \.item) { entity in
                    Text(entity.item).font(.title2)
                }
                TableColumn("Qty", value: \.qty) { entity in 
                    Text("\(entity.qty)").font(.title2)
                }
            }.frame(width: 900, height: 210)
             .onChange(of: sorting) { items.sort(using: $0) }
             .font(.title)
        }
    }
}

- Andy Jazz

Answer 3

现在可通过Table 在 macOS 12 及以上版本中使用。

- Curiosity

Answer 4

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

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

然后，只需重复此操作，直到需要的数据列数。

- Ben O

---

是的，但它看起来和感觉都很杂乱无章。没有列标题或列交换、排序等功能。最好暂时使用真正的工具，并希望在今年WWDC之后有更好的选择。我更惊讶的是，甚至连提到它的地方都几乎没有。 - Peter

Answer 5

例如：

struct StaffList: View {
   private var data = [Data]()
    var body: some View {
       List {
            HStack() {
                    VStack {
                        //Column 1 Data
                        Text("Name")
                            .foregroundColor(.primary)
                            .font(.headline)
                        Divider()
                        ForEach(data) { person in
                          //  Text(person.name) this is list ...
                        }
                    }
                Divider()
                VStack {
                    //Column 2 Data
                    Text("Creation Date")
                        .foregroundColor(.primary)
                        .font(.headline)
                    Divider()
                        ForEach(data) { person in
                          //  Text(person.name) this is list ...
                        }
                }
            }
        }
    }
}

- AzeTech