QML的Treeview 的右键菜单

最近使用到Treeview，需要添加一个功能，右键菜单。

他默认的clicked以及其他信号都不支持右键。Treeview的源码里面没有添加。

点击左键的时候，Treeview会选中那一行，如果添加右键，没有对应的函数和属性来选择这一行。

一、刚开始的时候我下载源码，重新编译了Treeview，让他支持右键

修改源码，给MouseArea增加   acceptedButtons: Qt.LeftButton | Qt.RightButton

增加一个右键点击的信号signal clickedR(var index, var mouse),mouse属性是为了获取mouse的位置方便显示菜单。

然后再onclicked里面判断鼠标，发送该信号。

 

二、使用下面这种代码，不需要编译源码，主要查看源码

TreeView {

        id: id_tree_view

        anchors.left: parent.left

        anchors.right: parent.right

        anchors.rightMargin: 1

        anchors.top: id_scan_btn.bottom

        anchors.topMargin: 1

        anchors.bottom: parent.bottom

        backgroundVisible: false

        headerVisible:false //不显示表头

        horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOff //关闭横向滚动条

        model: TreeModel

        frameVisible: false //背景为深色的时候  会有一条白边，false时消除边

        TableViewColumn {

            title: "Name"

            role: "name_role"

            resizable: false

            width: id_tree_view.width

        }

        style: TreeViewStyle {

            backgroundColor: "#20252A"

 

            itemDelegate: Rectangle{

                height: 28

                //背景设置透明，不然在选中行的时候会出现选中颜色就一半的情况

                color: styleData.depth === 0 ? "#3C454E" : "transparent"

                Text {

                    color: "white"

                    elide: styleData.elideMode

                    text: styleData.value

                    anchors.verticalCenter: parent.verticalCenter

                }

                Image {

                    source: "qrc:///res/navi/add.png"

                    anchors.verticalCenter: parent.verticalCenter

                    anchors.right: parent.right

                    anchors.rightMargin: 12

                    visible: styleData.depth === 0

                }

            }

            rowDelegate: Rectangle{

                id: rowDel

                color: styleData.selected ? "#595F69" : "transparent";

                height: 28

            }

            //重写三角

            branchDelegate: Rectangle {

                width:  20

                height: 28

                color:  styleData.depth === 0 ? "#3C454E" : "transparent"

                Image {

                    anchors.centerIn: parent

                    source:  styleData.isExpanded ? "qrc:///res/navi/triangle_gray_open.png" :

                                                    "qrc:///res/navi/triangle_gray_normal.png"

                    width:  sourceSize.width

                    height: sourceSize.height

                }

            }

        }

 

 

        MouseArea {

            anchors.fill: parent

            acceptedButtons: Qt.LeftButton | Qt.RightButton

 

            onClicked: {

                //选中当前行 -- 关键代码，来自源码里面

                var pressedRow = id_tree_view.__listView.indexAt(0, mouseY + id_tree_view.__listView.contentY)

                id_tree_view.__listView.currentIndex = pressedRow

 

                if(mouse.button === Qt.RightButton) {

                    var index = parent.indexAt(mouse.x, mouse.y)

                    if (index.valid) {

                        //打开菜单

                        id_navi_menu.x = mouse.x

                        id_navi_menu.y = mouse.y + id_tree_view.y

                        id_navi_menu.open()

                    }

                }

            }

            onDoubleClicked: {

                if(mouse.button === Qt.LeftButton) {

                    var index = parent.indexAt(mouse.x, mouse.y)

                    if (index.valid) {

                        if(id_tree_view.isExpanded(index))

                            id_tree_view.collapse(index)

                        else

                            id_tree_view.expand(index)

                    }

                }

            }

        }

    }