带有可单击单元格的 SwiftUI 表格，用于编辑内容

Question

我正在尝试在 SwiftUI 中创建一个三列

Table

，其中可以通过双击单元格来编辑条目。

与 MacOS 系统设置中的 DNS 条目表非常相似：

经过几个小时的搜索，我还没有找到办法。 该表本身可以工作。这是到目前为止的代码：

struct EditItem : Identifiable
{
    var id          : Int
    var original    : String
    var replacement : String
}

struct EditView : View
{
    @State var mEditList  : [EditItem] =
    [
        EditItem(id: 1, original: "bobo", replacement: "freddy"),
        EditItem(id: 2, original: "abcde", replacement: "gateway")
    ]
    @State var mSelection : Int?
    @State var mSortKey   = [KeyPathComparator(\EditItem.original)]
    
    var body: some View
    {
        VStack()
        {
            Text("OCR is not a perfect science and makes mistakes. Please edit the list below to correct them.")
    
            Table(mEditList, selection: $mSelection, sortOrder: $mSortKey)
            {
                TableColumn(Text("##").font(.system(size: 12)), value: \.id)
                {
                    item in
                    Text("\(item.id)").font(.system(size: 12))
                }
                .width(50)
                
                TableColumn(Text("Replace").font(.system(size: 12)), value: \.original)
                {
                    item in
                    Text(item.original).font(.system(size: 12))
                }
                
                TableColumn(Text("With...").font(.system(size: 12)), value: \.replacement)
                {
                    item in
                    Text("\(item.replacement)").font(.system(size: 12))
                }
                
            }
            .font(.title)
            .onChange(of: mSortKey)
            {
                mEditList.sort(using: mSortKey)
            }
        }
    }
}

目标平台是 MacOS（不是 iOS）。

Answer 1

如果你可以接受没有排序和选择功能，你可以这样尝试。 双击单元格使其成为可编辑的

TextField

。

struct EditView: View {
    @State private var mEditList: [EditItem] = [
        EditItem(id: 1, original: "bobo", replacement: "freddy"),
        EditItem(id: 2, original: "abcde", replacement: "gateway")
    ]
    
    var body: some View {
        VStack {
            Text("OCR is not a perfect science and makes mistakes. Please edit the list below to correct them.")
            
            Table($mEditList) {
                TableColumn(Text("##")) { item in
                    Text("\(item.id)")
                }
                .width(50)
                
                TableColumn("Replace") { $item in
                    EditableTextView(text: $item.original)
                }
                
                TableColumn("With...") { $item in
                    EditableTextView(text: $item.replacement)
                }
            }
        }
    }
}

struct EditableTextView: View {
    @State private var isEditing: Bool = false
    @Binding var text: String
    @FocusState var isFocused: Bool
    
    var body: some View {
        if isEditing {
            HStack {
                TextField("Text", text: $text)
                    .focusable()
                    .focused($isFocused)
                Button("Done") {
                    isEditing = false
                }
                .buttonStyle(.bordered)
                .keyboardShortcut(.defaultAction)
            }
        } else {
            Text("\(text)")
                .onTapGesture(count: 2) {
                    isEditing = true
                }
        }
    }
}