Question

我正在实施示例，如下所示：http://imaginativethinking.ca/how-to-use-qt-quicks-treeview/

如果我点击树视图项，我想添加一个响应的事件处理程序。

以下不起作用：

    TreeView {
    anchors.fill: parent
    model: theModel
    itemDelegate: Rectangle {
               color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
               height: 20

               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
               }
               // console.log("Saving the current project...");
           }

    TableViewColumn {
        role: "name_role"
        title: "Name"
        width: 110
    }
    TableViewColumn {
        role: "description_role"
        title: "Description"
        width: 570
    }
    onCurrentItemChanged: console.log("Running test..")
}

我收到错误消息：

Cannot assign to non-existent property "onCurrentItemChanged"

知道如何添加这样的事件处理程序吗？

Answer 1

以下代码有效：

import QtQuick 2.4
import QtQuick.Controls 1.4
import QtQuick.Window 2.2
import ca.imaginativethinking.tutorials.models 1.0

Item {
    width: 480
    height: 410
    MyTreeModel {
        id: tests
    }
    // @disable-check M300
    TreeView {
        anchors.fill: parent
        model: tests
        itemDelegate: Rectangle {
                   color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
                   height: 20

                   Text {
                       anchors.verticalCenter: parent.verticalCenter
                       text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
                   }
                   // console.log("Saving the current project...");
               }

        TableViewColumn {
            role: "name_role"
            title: "Name"
            width: 110
        }
        TableViewColumn {
            role: "description_role"
            title: "Description"
            width: 570
        }
        onClicked: {
            if (index.parent.row >= 0) {
                console.log(index.parent.row, index.row)
                console.log(tests.data(index))
            }
        }
    }

}

我没有使用onCurrentItemChanged，而是使用onClicked信号。我可以使用index.parent.row和index.row访问项目的索引。我可以使用tests.data（index）访问内容，其中tests是模型的名称（在问题中被命名为模型）。

Answer 2

我认为最好在项目委托中包含鼠标区域，这样您就可以在整个树中获取每个项目中的onlclick事件。像这样：

    itemDelegate: MouseArea{
         Rectangle {
               anchors.fill: parent
               color: ( styleData.row % 2 == 0 ) ? "white" : "lightgrey"
               height: 20

               Text {
                   anchors.verticalCenter: parent.verticalCenter
                   text: styleData.value === undefined ? "" : styleData.value // The branches don't have a description_role so styleData.value will be undefined
               }
               // console.log("Saving the current project...");
           }

           onClicked: {
               console.log(styleData.index)
               console.log(tests.data(styleData.index))
           }
    }

如何将onClick事件添加到QML TreeView

2 个答案: