如何在qt表格视图中使单元格可编辑

Question

我尝试使用 qt 中的表视图使单元格可编辑。我找到了一些例子，并提出了以下内容：

TableView {
    id: tableView
    objectName: "tableView"
    horizontalScrollBarPolicy: -1
    selectionMode: SelectionMode.SingleSelection
    Layout.minimumWidth: 300
    Layout.fillHeight: true
    Layout.fillWidth: true
    model: trackableInfoModel
    itemDelegate: Rectangle {
        Text {
            anchors.verticalCenter: parent.verticalCenter
            text: styleData.value
        }
        MouseArea {
            id: cellMouseArea
            anchors.fill: parent
            onClicked: {
                if(styleData.column === 2){
                      //do something
                }
            }
        }
    }

从我发现的情况来看，我似乎需要一个 itemDelegate 来绘制每个单元格。然后我向单元格添加一个鼠标区域并检查选择了哪个单元格。就我而言，我只需要对第 2 列中的单元格做出反应。

问题是当我使用上面显示的代码时，我收到以下错误：

JavaScipt 块在 QT Quick UI 表单中不受支持。(M223(

因此，我尝试像这样为 cellMouseArea 注册一个属性别名：

属性别名单元格鼠标区域

：单元格鼠标区域

但是，这会导致此错误：

qrc：/EditPageForm.ui.qml：24 别名引用无效。找不到 id "cellMouseArea">

Answer 1

单击时带有文本输入的叠加单元格。

import QtQuick 2.7
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.0
ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    TableView {
        id: tableView
        objectName: "tableView"
        horizontalScrollBarPolicy: -1
        selectionMode: SelectionMode.SingleSelection
        anchors.fill: parent
        TableViewColumn {
            id: titleColumn
            title: "Title"
            role: "title"
            movable: false
            resizable: false
            width: tableView.viewport.width - authorColumn.width
        }
        TableViewColumn {
            id: authorColumn
            title: "Author"
            role: "author"
            movable: false
            resizable: false
            width: tableView.viewport.width / 3
        }
        model: ListModel {
            id: libraryModel
            ListElement {
                title: "A Masterpiece"
                author: "Gabriel"
            }
            ListElement {
                title: "Brilliance"
                author: "Jens"
            }
            ListElement {
                title: "Outstanding"
                author: "Frederik"
            }
        }
        itemDelegate: Rectangle {
            Text {
                anchors { verticalCenter: parent.verticalCenter; left: parent.left }
                color: "black"
                text: styleData.value
            }
            MouseArea {
                id: cellMouseArea
                anchors.fill: parent
                onClicked: {
                    // Column index are zero based
                    if(styleData.column === 1){
                        loader.visible = true
                        loader.item.forceActiveFocus()
                    }
                }
            }
            Loader {
                id: loader
                anchors { verticalCenter: parent.verticalCenter; left: parent.left}
                height: parent.height
                width: parent.width
                visible: false
                sourceComponent: visible ? input : undefined
                Component {
                    id: input
                    TextField {
                        anchors { fill: parent }
                        text: ""
                        onAccepted:{
                            // DO STUFF
                            loader.visible = false
                        }
                        onActiveFocusChanged: {
                            if (!activeFocus) {
                                loader.visible = false
                            }
                        }
                    }
                }
            }
        }
    }
}