xcode SwiftUI 3 MacOs表格单选和双击打开工作表

wr98u20j  于 2022-12-27  发布在  Swift
关注(0)|答案(3)|浏览(146)
import SwiftUI

struct ContentView: View {
    
    @State private var items: [ItemModel] = Array(0...100).map { ItemModel(id: $0, title: "item \($0)", age: $0) }
    @State private var selection = Set<ItemModel.ID>()
    @State private var sorting = [KeyPathComparator(\ItemModel.age)]
    
    var body: some View {
        Table(items, selection: $selection, sortOrder: $sorting) {
            TableColumn("id", value: \.id) { Text("\($0.id)") }
            TableColumn("title", value: \.title)
            TableColumn("age", value: \.age) { Text("\($0.age)") }
        }
        .onChange(of: sorting) {
            items.sort(using: $0)
        }
        .font(.caption)
        .frame(width: 960, height: 540)
    }
}

struct ItemModel: Identifiable {
    var id: Int
    var title: String
    var age: Int
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

这是一个工作的例子,一个表排序的模型。年龄,并支持多重选择,我想单一的选择和打开工作表双击一行,这是可能的吗?还有,我如何得到选定的项目对象?
谢谢🙏

cmssoen2

cmssoen21#

必须将Set<Value.ID>更改为Value.ID(仅用于一个行选择),并将TapGesture设置为文本。

@State private var selection = Set<ItemModel.ID>() // <-- Use this for multiple rows selections
@State private var selection : ItemModel.ID? // <--- Use this for only one row selection
struct ContentView: View {
    
    @State private var items: [ItemModel] = Array(0...100).map { ItemModel(id: $0, title: "item \($0)", age: $0) }
    //@State private var selection = Set<ItemModel.ID>() <-- Use this for multiple rows selections
    @State private var selection : ItemModel.ID? // <--- Use this for only one row selection
    @State private var sorting = [KeyPathComparator(\ItemModel.age)]
    @State private var showRow = false
    
    var editRow: some View {
        VStack {
            Text(items[selection!].title)
                .font(.title)
            Text("Selected: \(selection.debugDescription)")
             Button("Dismiss") {
                showRow.toggle()
             }.padding()
        }
        .frame(minWidth:400, minHeight: 400)
    }
    
    var body: some View {
        VStack {
            Table(items, selection: $selection, sortOrder: $sorting) {
                TableColumn("id", value: \.id) {
                    Text("\($0.id)")
                        .onTapGesture(count: 2, perform: {
                            if selection != nil {
                                showRow.toggle()
                            }
                        })
                }
                TableColumn("title") { itemModel in
                    Text(itemModel.title)
                        .onTapGesture(count: 2, perform: {
                            if selection != nil {
                                showRow.toggle()
                            }
                        })
                }
                TableColumn("age", value: \.age) { Text("\($0.age)") }
            }
            .onChange(of: sorting) {
                items.sort(using: $0)
            }
            .font(.caption)
            .frame(width: 960, height: 540)
        }
        .sheet(isPresented: $showRow) {
            editRow
        }
    }
}
v6ylcynt

v6ylcynt2#

像亚当评论的那样,另一个答案在选择区域和响应时间方面存在许多问题。
您确实需要将var selection设置为ItemModel.ID?,但是您还需要以不同的方式处理单击操作。
值得注意的是,这将只从大苏尔工作。
我处理单击和双击的不同操作的方式如下:

.gesture(TapGesture(count: 2).onEnded {
    print("double clicked")
})
.simultaneousGesture(TapGesture().onEnded {
    print("single clicked")
})

对于您的示例:

struct ContentView: View {
    
    @State private var items: [ItemModel] = Array(0...100).map { ItemModel(id: $0, title: "item \($0)", age: $0) }
    @State private var selection = ItemModel.ID?
    @State private var sorting = [KeyPathComparator(\ItemModel.age)]
    @State private var isShowingSheet: Bool = false
    
    var body: some View {
        Table(items, selection: $selection, sortOrder: $sorting) {
            TableColumn("id", value: \.id) {
                Text("\($0.id)").gesture(TapGesture(count: 2).onEnded {
                    self.
                }).simultaneousGesture(TapGesture().onEnded {
                    self.selection = $0.id
                })
            }
            TableColumn("title", value: \.title)
            TableColumn("age", value: \.age) { Text("\($0.age)") }
        }
        .onChange(of: sorting) {
            items.sort(using: $0)
        }
        .font(.caption)
        .frame(width: 960, height: 540).sheet(isPresented: self.$isShowingSheet) {
            Button("Close Sheet") { self.isShowingSheet = false } // <-- You may want to allow click to close sheet.
            Text("Sheet Content Here")
        }
    }
}

如果要允许在整行中单击和双击,则需要使TableColumn内容填充列的整个宽度,并对TableColumn内容的其余部分应用修饰符。

8tntrjer

8tntrjer3#

关于双击表格行:Apple在WWDC 2022上推出了SwiftUI 4的新上下文菜单修改器contextMenu(forSelectionType:menu:primaryAction:)。通过该修改器,可以提供用户双击Table行时执行的primaryAction

@State private var selection: ItemModel.ID?

var body: some View {
    Table(items, selection: $selection, sortOrder: $sortOrder) {
        TableColumn("id", value: \.id)
        TableColumn("title", value: \.title)
        TableColumn("age", value: \.age)
    }
    .contextMenu(forSelectionType: ItemModel.ID.self) { items in
        // ...
    } primaryAction: { items in
        // This is executed when the row is double clicked
    }
}

相关问题