QML自定义树控件（TreeView 的style加上节点可拖动）

• 背景：

         前段时间工作需要使用QML的TreeView，要通过拖动节点，对应节点执行对应的操作，查了很多的资料，没有看到关于节点可拖动的资料，查看TreeView的源码，貌似存在关于节点拖动的地方，但是始终没有看到可以使用的接口，只好自己动手造轮子了，加上使用过程中踩了不少的坑，也算是给后面用到的人一个案例吧，如果有什么好的建议，什么疑问，又或者有好的萝卜坑推荐，都可以加这个QQ：995187021，即使没有解决问题，也可以交个朋友。

• 效果：

• 代码：（直接上代码了，不知道怎么描述，看注释吧，有问题加QQ）

MyTreeView.qml

 

import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQml.Models 2.2

Rectangle{
    property variant nodePic: ["qrc:/pic/pan.png","qrc:/pic/dir.png","qrc:/pic/file.png"]
    id:root
    TreeView{
        id:myTree
        anchors.fill:parent
        style: treeViewStyle
        selection: sel
        headerVisible: false    //隐藏列的头，想知道作用可以注释掉运行看效果
        Component.onCompleted: {
            model = TreeModel.model() //从TreeModel获取model
        }
        
        itemDelegate:Item{          //节点代理
            id:treeItem
            Image {                 //节点前的图片
                id: nodeImg
                height: parent.height
                width: {                //不同级的节点图片宽度不一样
                    if(styleData.depth==0){
                        return parent.width/6
                    }else if(styleData.depth==1){
                        return parent.width/10
                    }else if(styleData.depth==2){
                        return parent.width/6
                    }
                }
                source: {                       //不同级的节点图片不一样
                    if(styleData.depth==0){
                        return nodePic[0]
                    }else if(styleData.depth==1){
                        return nodePic[1]
                    }else if(styleData.depth==2){
                        return nodePic[2]
                    }
                }
            }
            Text{
                id:itemText
                anchors.left: nodeImg.right
                anchors.leftMargin: 4
                anchors.bottom:parent.bottom
                // elide: styleData.elideMode
                text:styleData.value       //显示来自model的文本
                color: styleData.selected ? "#007dff":"white"  //选中时字体颜色切换
                font.pointSize:styleData.selected ? 10:9      //选中时字体大小改变
                
                Drag.active: styleData.depth<=1 ? false:itemMosue.drag.active;//一级节点不可拖动
                Drag.supportedActions: Qt.CopyAction;   //选择复制数据到DropArea
                Drag.dragType: Drag.Automatic;          //选择自动开始拖动
                Drag.mimeData: {"text": text};          //选择要传的数据，这里传文本
                
                MouseArea{                              //节点代理的鼠标事件
                    id:itemMosue
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: itemText
                    
                    Drag.onDragStarted: {       //控制台打印开始拖动
                        console.log("start")
                    }
                    onPressed: {
                        sel.setCurrentIndex(styleData.index,0x0010) //点击了文字，选中该节点
                        if(styleData.isExpanded){                   //切换节点的展开状态
                            myTree.collapse(styleData.index)
                        }
                        else{
                            myTree.expand(styleData.index)
                        }
                    }
                    //onReleased: parent.Drag.drop()
                }
            }
        }
        TableViewColumn {               //列
            title:qsTr("所有通道")
            role: "text"                //显示的元素
            width: 200                  //列的宽
        }
    }
    ItemSelectionModel {            //自定义添加选中
        id: sel
        model: TreeModel.model();
    }
    Component {
        id:treeViewStyle            //树的自定义样式
        TreeViewStyle {
            indentation: 30         //节点间隔
            branchDelegate: Image { //节点的展开标记图
                id:image
                source: styleData.isExpanded ? "qrc:/pic/collapse.png" : "qrc:/pic/expansion.png"
                width: 9
                height:9
                anchors.top:parent.top
                anchors.topMargin: 2
            }
            rowDelegate: Rectangle {            //行代理
                height: 16
                color:styleData.selected? "#e9fffd" : "#323232" //这里决定了节点选中的颜色和背景颜色
            }
            
        }
    }
}

main.qml

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    MyTreeView{
        id:myTree
        height: parent.height
        width: parent.width/2
    }
    Rectangle{
                id:dropContainer
                height: parent.height/2
                width: parent.width/4
                anchors.left: myTree.right
                y:10
                Text {
                    id: accptedText
                    text: qsTr("请拖动树节点到该矩形框!!!")
                    color: "red"
                }
                  border.color: "red"
                  border.width: 1
                  DropArea{
                            id:myDropArea
                            anchors.fill: parent
                            onDropped: {
                            if(drop.supportedActions == Qt.CopyAction){
                                    accptedText.text=drop.getDataAsString("text")
                            }
                         }
                  }

    }
}

 压缩包下载链接：

1.GitHub：https://github.com/simplewen/QML

2CSDN下载：https://download.csdn.net/download/weixin_40912639/10778343