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

 

 

  • 0
    点赞
  • 20
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:书香水墨 设计师:CSDN官方博客 返回首页
评论

打赏作者

闻天语~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值