如何将上下文菜单应用到 SwiftUI 表格行？

Question

我发现 SwiftUI 3.0 中的新表格组件就像一个玩具，可以轻松使用，但难以扩展更多功能。

TableRow 和 TableColumn 继承自值对象。如何获取行视图？我想为每行设置不同的 ContextMenu。另外，我还想为列标题设置 ContextMenu。

如何在 Table 组件的基础上实现它？我不想使用 List 组件。

struct Person: Identifiable {

let givenName: String

let familyName: String

let id = UUID()

}

@State private var people = [

Person(givenName: "Juan", familyName: "Chavez"),

Person(givenName: "Mei", familyName: "Chen"),

Person(givenName: "Tom", familyName: "Clark"),

Person(givenName: "Gita", familyName: "Kumar"),

]

@State private var sortOrder = [KeyPathComparator(\Person.givenName)]

var body: some View {

Table(people, sortOrder: $sortOrder) {

TableColumn("Given Name", value: \.givenName)

TableColumn("Family Name", value: \.familyName)

}

.onChange(of: sortOrder) {

people.sort(using: $0)

}

}

- user1397892

Answer 1

为了在SwiftUI 3.0表格上使右键菜单正常工作，需要将其添加到每个TableColumn项目中。此外，如果您想要支持“双击”，也需要单独添加它。

Table(documents, selection: $fileSelection) {
    TableColumn("File name") { item in
        Text(item.filename)
            .contextMenu { YOUR_CONTEXT_MENU }
            .simultaneousGesture(TapGesture(count: 1).onEnded { fileSelection = item.id })
            .simultaneousGesture(TapGesture(count: 2).onEnded { YOUR_DOUBLE_TAP_IMPLEMENTATION })
    }
    TableColumn("Size (MB)") { item in
        Text(item.size)
            .contextMenu { YOUR_CONTEXT_MENU }
            .simultaneousGesture(TapGesture(count: 1).onEnded { fileSelection = item.id })
            .simultaneousGesture(TapGesture(count: 2).onEnded { YOUR_DOUBLE_TAP_IMPLEMENTATION })
    }
}

- AlbertUI

---

谢谢您的回复，但是这个实现只能处理单元格的内容，无法完全覆盖整行的内容，并且对于行中的空白部分也不会生效。 - user1397892

@user1397892 我同意，现在有更好的解决方案吗？ - DeveloBär

Answer 2

从 macOS 13 开始，这将像预期的那样工作：

要尝试它，请使用苹果的 Garden 应用程序，并将表格的行部分替换为以下内容

  } rows: {
        
        ForEach(plants) { plant in
            TableRow(plant)
                .itemProvider { plant.itemProvider }
                .contextMenu {
                    Button {
                        
                    } label: {
                        Text("test")
                    }
                }
        }
        .onInsert(of: [Plant.draggableType]) { index, providers in
            Plant.fromItemProviders(providers) { plants in
                garden.plants.insert(contentsOf: plants, at: index)
            }
        }
    }

- Marc T.

---

请问您能告诉我们从哪里下载这个苹果的样例花园应用程序吗？ - Sébastien REMY

苹果的源代码可以在这里找到：https://developer.apple.com/documentation/swiftui/building_a_great_mac_app_with_swiftui - Zeke Snider