-
背景:
前段时间工作需要使用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