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

Posted 2023-02-22

【中文标题】如何将上下文菜单应用于 SwiftUI 表格行？

【英文标题】：How to apply a context menu to SwiftUI Table row?

【发布时间】：2021-12-28 00:22:34

【问题描述】：

我发现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)

【参考方案1】：

为了让 contextMenu 在 SwiftUI 3.0 Table 上工作，有必要将它添加到每个 TableColumn 项目中。另外，如果你想添加Double Tap支持也需要单独添加。

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 )
    

【讨论】：

感谢您的回复，但是这个实现只能对单元格的内容起作用，不能完全覆盖整行的内容，对行的空白部分也不会生效。