QML自定义一个TreeView，使用ListView递归

已于 2022-05-28 10:34:05 修改
阅读量8.1k 收藏 42
点赞数 8
分类专栏： QML 三言两语 文章标签： Qt QML TreeView
于 2019-05-26 14:05:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongjianbo1992/article/details/90575519
版权

0.前言

在 Qt5 的 QtQuick.Controls 2.x 中还没有 TreeView 这个控件（在 Qt6 中出了一个继承自 TableView 的 TreeView），而且 QtQuick.Controls 1.x 中的也需要配合 C++ model 来自定义，对于一些简单的需求还要写 C++ model 就显得费事儿。

参照别人的自定义 TreeView 实现，我也使用 ListView 嵌套的方式做了一个简易的 TreeView，主要功能就是根据 json 结构来生成一个树状列表。

（2022-05-28）在最初的版本没考虑 ListView 超过 cache 范围自动销毁的问题，改版后勾选等状态放到外部数组中，释放后重新创建 delegate item 时，会从外部数组中取值进行判断该 item 是否勾选。

1.展示

先看看ui效果图-1和自己的demo图-2。三级目录，其中最后一级是勾选框。我用黑色表示无子项，白色有子项已展开，灰色有子项未展开，绿色已勾选，红色未勾选。实际使用时会替换为image。

     

//PS.后面完善了下，效果如下图

代码github：https://github.com/gongjianbo/QmlTreeView

主要代码：

//TreeView.qml

import QtQuick 2.7
import QtQuick.Controls 2.7

//代码仅供参考，很多地方都不完善
//还有一些样式没有导出，可以根据需求自己定义
//因为ListView有回收策略，除非cacheBuffer设置很大，所以状态不能保存在delegate.item中
//需要用外部变量或者model来存储delegate.item的状态
Rectangle {
    id: control

    property string currentItem //当前选中item

    property int spacing: 10    //项之间距离
    property int indent: 5      //子项缩进距离,注意实际还有icon的距离
    property string onSrc: "qrc:/img/on.png"
    property string offSrc: "qrc:/img/off.png"
    property string checkedSrc: "qrc:/img/check.png"
    property string uncheckSrc: "qrc:/img/uncheck.png"

    property var checkedArray: [] //当前已勾选的items
    property bool autoExpand: true

    //背景
    color: Qt.rgba(2/255,19/255,23/255,128/255)
    border.color: "darkCyan"
    property alias model: list_view.model
    ListView {
        id: list_view
        anchors.fill: parent
        anchors.margins: 10
        //model: //model由外部设置，通过解析json
        property string viewFlag: ""
        delegate: list_delegate
        clip: true
        onModelChanged: {
            console.log('model change')
            checkedArray=[]; //model切换的时候把之前的选中列表清空
        }
    }
    Component {
        id: list_delegate
        Row{
            id: list_itemgroup
            spacing: 5
            property string parentFlag: ListView.view.viewFlag
            //以字符串来标记item
            //字符串内容为parent.itemFlag+model.index
            property string itemFlag: parentFlag+"-"+(model.index+1)

            //canvas 画项之间的连接线
            Canvas {
                id: list_canvas
                width: item_titleicon.width+10
                height: list_itemcol.height
                //开了反走样，线会模糊看起来加粗了
                antialiasing: false
                //最后一项的连接线没有尾巴
                property bool isLastItem: (model.index===list_itemgroup.ListView.view.count-1)
                onPaint: {
                    var ctx = getContext("2d")
                    var i=0
                    //ctx.setLineDash([4,2]); 遇到个大问题，不能画虚线
                    // setup the stroke
                    ctx.strokeStyle = Qt.rgba(201/255,202/255,202/255,1)
                    ctx.lineWidth=1
                    // create a path
                    ctx.beginPath()
                    //用短线段来实现虚线效果，判断里-3是防止width(4)超过判断长度
                    //此外还有5的偏移是因为我image是透明背景的，为了不污染到图标
                    //这里我是虚线长4，间隔2，加起来就是6一次循环
                    //效果勉强
                    ctx.moveTo(width/2,0) //如果第一个item虚线是从左侧拉过来，要改很多
                    for(i=0;i<list_itemrow.height/2-5-3;i+=6){
                        ctx.lineTo(width/2,i+4);
                        ctx.moveTo(width/2,i+6);
                    }

                    ctx.moveTo(width/2+5,list_itemrow.height/2)
                    for(i=width/2+5;i<width-3;i+=6){
                        ctx.lineTo(i+4,list_itemrow.height/2);
                        ctx.moveTo(i+6,list_itemrow.height/2);
                    }

                    if(!isLastItem){
                        ctx.moveTo(width/2,list_itemrow.height/2+5)
                        for(i=list_itemrow.height/2+5;i<height-3;i+=6){
                            ctx.lineTo(width/2,i+4);
                            ctx.moveTo(width/2,i+6);
                        }
                        //ctx.lineTo(10,height)
                    }
                    // stroke path
                    ctx.stroke()
                }

                //项图标框--可以是ractangle或者image
                Image {
                    id: item_titleicon
                    visible: false
                    //如果是centerIn的话展开之后就跑到中间去了
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.leftMargin: list_canvas.width/2-width/2
                    anchors.topMargin: list_itemrow.height/2-width/2
                    //根据是否有子项/是否展开加载不同的图片/颜色
                    //color: item_repeater.count
                    //      ?item_sub.visible?"white":"gray"
                    //:"black"
                    //这里没子项或者子项未展开未off，展开了为on
                    source: item_repeater.count?item_sub.visible?offSrc:onSrc:offSrc

                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            if(item_repeater.count)
                                item_sub.visible=!item_sub.visible;
                        }
                    }
                }

                //项勾选框--可以是ractangle或者image
                Image {
                    id: item_optionicon
                    visible: false
                    width: 10
                    height: 10
                    anchors.left: parent.left
                    anchors.top: parent.top
                    anchors.leftMargin: list_canvas.width/2-width/2
                    anchors.topMargin: list_itemrow.height/2-width/2
                    property bool checked: isChecked(itemFlag)
                    //勾选框
                    //color: checked
                    //       ?"lightgreen"
                    //       :"red"
                    source: checked?checkedSrc:uncheckSrc
                    MouseArea {
                        anchors.fill: parent
                        onClicked: {
                            item_optionicon.checked=!item_optionicon.checked;
                            if(item_optionicon.checked){
                                check(itemFlag);
                            }else{
                                uncheck(itemFlag);
                            }
                            var str="checked ";
                            for(var i in checkedArray)
                                str+=String(checkedArray[i])+" ";
                            console.log(str)
                        }
                    }
                }

            }

            //项内容：包含一行item和子项的listview
            Column {
                id: list_itemcol

                //这一项的内容，这里只加了一个text
                Row {
                    id: list_itemrow
                    width: control.width
                    height: item_text.contentHeight+control.spacing
                    spacing: 5

                    Rectangle {
                        height: item_text.contentHeight+control.spacing
                        width: parent.width
                        anchors.verticalCenter: parent.verticalCenter
                        color: (control.currentItem===itemFlag)
                               ?Qt.rgba(101/255,255/255,255/255,38/255)
                               :"transparent"

                        Text {
                            id: item_text
                            anchors.left: parent.left
                            anchors.verticalCenter: parent.verticalCenter
                            text: modelData.text
                            font.pixelSize: 14
                            font.family: "Microsoft YaHei UI"
                            color: Qt.rgba(101/255,1,1,1)
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: {
                                control.currentItem=itemFlag;
                                console.log("selected",itemFlag)
                            }
                        }
                    }

                    Component.onCompleted: {
                        if(modelData.istitle){
                            item_titleicon.visible=true;
                        }else if(modelData.isoption){
                            item_optionicon.visible=true;
                        }
                    }
                }

                //放子项
                Column {
                    id: item_sub
                    //也可以像check一样用一个expand数组保存展开状态
                    visible: control.autoExpand
                    //上级左侧距离=小图标宽+x偏移
                    x: control.indent
                    Item {
                        width: 10
                        height: item_repeater.contentHeight
                        //需要加个item来撑开，如果用Repeator获取不到count
                        ListView {
                            id: item_repeater
                            anchors.fill: parent
                            delegate: list_delegate
                            model: modelData.subnodes
                            property string viewFlag: itemFlag
                        }
                    }
                }

            }
        }//end list_itemgroup
    }//end list_delegate

    //勾选时放入arr中
    function check(itemFlag){
        checkedArray.push(itemFlag);
    }

    //取消勾选时从arr移除
    function uncheck(itemFlag){
        var i = checkedArray.length;

        while (i--) {
            if (checkedArray[i] === itemFlag) {
                checkedArray.splice(i,1);
                break;
            }
        }
    }

    //判断是否check
    function isChecked(itemFlag){
        var i = checkedArray.length;

        while (i--) {
            if (checkedArray[i] === itemFlag) {
                return true;
            }
        }
        return false;
    }
}

//main.qml

import QtQuick 2.7
import QtQuick.Controls 2.7
import QtQuick.Window 2.7

Window {
    id: root_window
    visible: true
    width: 640
    height: 480
    title: qsTr("QmlTreeView By GongJianBo")
    color: Qt.rgba(3/255,26/255,35/255,1)

    //滚动条可以自己设置
    //ListView横向滚动条需要设置如下两个参数(如果是竖向的ListView)
    //contentWidth: 500
    //flickableDirection: Flickable.AutoFlickIfNeeded
    TreeView{
        id: item_tree
        width: parent.width/2
        anchors{
            left: parent.left
            top: parent.top
            bottom: parent.bottom
            margins: 10
        }
        //model: []

        //set model data
        Component.onCompleted: {
            console.log(1)
            root_window.setTestDataA();
            console.log(2)
        }
    }

    Column{
        anchors{
            right: parent.right
            top: parent.top
            margins: 10
        }
        spacing: 10
        Button{
            text: "ChangeModel"
            checkable: true
            //changed model data
            onClicked: {
                if(checked){
                    root_window.setTestDataB();
                }else{
                    root_window.setTestDataA();
                }
            }
        }
        Button{
            text: "AutoExpand"
            onClicked: item_tree.autoExpand=!item_tree.autoExpand
        }
    }

    function setTestDataA(){
        item_tree.model=JSON.parse('[
        {
            "text":"1 one",
            "istitle":true,
            "subnodes":[
                {"text":"1-1 two","istitle":true},
                {
                    "text":"1-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"1-2-1 three","isoption":true},
                        {"text":"1-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {
            "text":"2 one",
            "istitle":true,
            "subnodes":[
                {"text":"2-1 two","istitle":true},
                {
                    "text":"2-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"2-2-1 three","isoption":true},
                        {"text":"2-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {
            "text":"3 one",
            "istitle":true,
            "subnodes":[
                {"text":"3-1 two","istitle":true},
                {"text":"3-2 two","istitle":true}
            ]
        },
        {
            "text":"4 one",
            "istitle":true,
            "subnodes":[
                {"text":"4-1 two","istitle":true},
                {
                    "text":"4-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"4-2-1 three","isoption":true},
                        {"text":"4-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {
            "text":"5 one",
            "istitle":true,
            "subnodes":[
                {"text":"5-1 two","istitle":true},
                {
                    "text":"5-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"5-2-1 three","isoption":true},
                        {"text":"5-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {
            "text":"6 one",
            "istitle":true,
            "subnodes":[
                {"text":"6-1 two","istitle":true},
                {"text":"6-2 two","istitle":true}
            ]
        }
    ]')
    }

    function setTestDataB(){
        item_tree.model=JSON.parse('[
        {
            "text":"1 one",
            "istitle":true,
            "subnodes":[
                {
                    "text":"1-1 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"1-1-1 three","isoption":true},
                        {"text":"1-1-2 three","isoption":true}
                    ]
                },
                {
                    "text":"1-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"1-2-1 three","isoption":true},
                        {"text":"1-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {
            "text":"2 one",
            "istitle":true,
            "subnodes":[
                {"text":"2-1 two","istitle":true},
                {
                    "text":"2-2 two",
                    "istitle":true,
                    "subnodes":[
                        {"text":"2-2-1 three","isoption":true},
                        {"text":"2-2-2 three","isoption":true}
                    ]
                }
            ]
        },
        {"text":"3 one","istitle":true},
        {
            "text":"4 one",
            "istitle":true,
            "subnodes":[
                {"text":"4-1 two","istitle":true},
                {"text":"4-2 two","istitle":true}
            ]
        }
    ]')
    }
}

2.参考

思路参考：https://github.com/peihaowang/QmlTreeWidget

ListView 文档：https://doc.qt.io/qt-5/qml-qtquick-listview.html

龚建波
关注
  • 8
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 2
    评论
专栏目录
qt qml treeview 树控件
01-29
qt qml 树控件。 /递归树显示 /左侧一个箭头，点击可展开显示子树 /选中节点变色 /节点点击事件 /tag属性，携带类似id的数据
qml中TreeView自定义数据类型，使在代理（Delegate）中能传递到更多的数据
10-10
qml中TreeView自定义数据类型，使在代理（Delegate）中能传递到更多的数据 具体可以访问博客https://www.jianshu.com/p/dc24d010e5e4
qml 实现一个listview
foxgod的专栏
07-18 642
通过qml实现listview的主要功能，菜单，滚动条，拖动改变内容等
QML TreeView的简单自定义样式
qq_45523399的博客
04-24 2985
QML TreeView的简单自定义样式
QML学习十五：ListView的简单使用（内建Model）
06-17 5051
QML
QML树控件TreeView的使用
02-22
在Qt5.5之前是没有树控件的，我们在使用时用的是ListView来构造出一个树，Qt5.5之后的QML开发阶段，有了树控件TreeView，本篇着重记录QML的TreeView的使用（包括增加树节点和删除节点）。
QML实现一个TreeView
hu853712064的博客
05-26 2045
在Qt5中的QtQuick.Controls 2.x中没有TreeView这个控件，而只在QtQuick.Controls 1.x中拥有这个控件。因此当我们使用高版本的QtQuick.Controls时，无法使用TreeView，因此我们必须得想办法自己实现一个TreeView。实现TreeView的最容易想到的思路就是迭代使用ListView，ListView我们是可以使用的，而TreeView实际上就是ListView套ListView（套娃），因此灵活使用ListView就能制作一个TreeView。
Qt qml treeview 树控件
weixin_34290000的博客
03-02 593
qml并没有提供树控件，只能自己写了。model仍然用ListModel对象，弄成层级的就行。delegate必须用loader动态的增加子控件，如此而已。 【先看效果】 【下载】 http://download.csdn.net/detail/surfsky/8406181 【核心代码】 1 import QtQuick 2.1 2 import QtQuick.Co...
QML TreeView 简单使用
YumOS的博客
06-15 3234
QML TreeView 是 Qt Quick 中的一个组件，用于显示树形结构的数据。它提供了一种以层次结构方式展示数据的方式，其中每个节点可以包含子节点。Model-View 架构：QML TreeView 遵循 Model-View 架构，其中数据模型（通常是 QAbstractItemModel 的子类）负责提供数据，而视图组件则负责显示和交互。数据模型提供了节点层次结构以及每个节点的数据。Delegate 委托：TreeView 使用委托来定义每个节点的外观和行为。
QML之TreeView的使用
qq_33271629的博客
03-20 1462
注: 测试环境为Opensuse 15.5 + Qt 6.6.2。如果有大神知道其他解决办法的，请评论区发出来。
qml中treeview用法
11-01
qml中treeview的用法，界面跟后端数据交互，简单的教学例子
QML ListView实现树形二级列表（类似 android ExpandableListView控件）
08-11
QML 中没有直接提供类似 android 的ExpandableListView二级列表控件，treeView，但是用 treeView 实在是有些不方便，并且达不到想要的效果，所以干脆用 ListView 来扩展一个。
在Qml中TreeView自定义数据类型
01-21
qml中的TreeView是QtQuick.Controls 1.x的一个组件，由于现在Qt发展QtQtQuick.Controls 2.x，1.x不再更新新特性，这方面的资料也比较少，如果想在其Delegate中传递更多的数据，则需要对styleData.value进行定制，具体实现请看代码以及博客https://www.jianshu.com/p/dc24d010e5e4
Qt5 qml TreeView 迄今为止功能最全的树控件节点前增减节点、节点后增加节点、重命名节点及节点选中、悬浮背景颜色定制等功能
10-18
迄今为止功能最全，最好用的qml树控件。 包含功能，任意位置删除节点、任意位置增加节点，节点重命名，背景颜色定制等功能。
QML TreeView 自定义样式加上节点可拖动
11-11
关于QML 的样式定义，包括背景颜色，选中颜色，节点前图片，可展开节点的图片。最最重要的节点可拖动
一套完整的强大的qml自定义控件
04-20
一套完整的自定义的qmlGUI控件，功能强大完全可以拿去开发项目而不用重复造轮子。包括Button，Calendar，CheckBox，ComboBox，CtrlDialog，DateEdit，DatePicker，Dialog，FileDialog，ImageButton，Label，LineEdit...
Qml自定义复选框QmlCheckBox.7z
11-22
6. **复用性**：为了提高代码的可维护性和复用性，自定义组件通常会被封装为一个单独的QML类型，这样可以在多个地方重复使用。 在"Qml自定义复选框QmlCheckBox"这个示例中，很可能包含了一个自定义的CheckBox组件源...
使用QML的ListView自制树形结构图TreeView
最新发布
qq_23604781的博客
08-06 326
感觉QML自带的TreeView不是很好用，用在文件路径树形结构比较多，但是想用在自己数据里，就不太方便了，所以自己做一个。
使用qml，在ListView中嵌套一个ListView
06-06
在QML中，可以使用嵌套ListView来实现多级列表的效果。下面是一个简单的示例： ```qml ListView { width: 200 height: 300 model: ListModel { ListElement { text: "Group 1"; items: ["Item 1", "Item 2", "Item 3"] } ListElement { text: "Group 2"; items: ["Item 4", "Item 5"] } ListElement { text: "Group 3"; items: ["Item 6", "Item 7", "Item 8", "Item 9"] } } delegate: Column { Text { text: model.text } ListView { width: parent.width height: 100 model: model.items delegate: Text { text: modelData } } } } ``` 在这个示例中，外层的ListView使用一个包含多个子项的ListModel作为数据模型，每个子项包含一个文本和一个子列表。每个子列表使用一个嵌套的ListView来显示其子项。 在外层的ListView的delegate中，我们使用一个Column来显示每个子项的文本和子列表。其中子列表使用一个嵌套的ListView来显示其子项，宽度设置为父元素的宽度，高度设置为100。 注意，当使用嵌套ListView时，需要格外小心，因为它们可能会导致性能问题。确保在实际使用中进行测试和优化。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

龚建波

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

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

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

打赏作者

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

抵扣说明：

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

余额充值