Qt6.3 终于新增了一个 TreeView,之前 Controls1 中的 TreeView 废弃后,一直没出新的 TreeView 组件。先不说这个新的 TreeView 是继承自 TableView 的,光是看只有几百行源码,就感觉又是个半成品。此外,还附带提供了一个 TreeViewDelegate 默认的 delegate 实现。
TreeView 文档:
https://doc.qt.io/qt-6/qml-qtquick-treeview.html
TreeView 继承自 TableView,这意味着即使模型数据为树形结构,TreeView 在内部使用 proxy model 将该结构转换为可由 TableView 呈现的表格模型。树中的每个节点最终占据表中的一行,其中第一列呈现树本身。通过根据模型中的父子深度缩进该列中的每个 delegate Item,它最终看起来像一棵树,即使它在技术上仍然只是一个表格。
其 delegate 也是和 TableView 单元格 delegate 差不多的用法。在 delegate 中,可以定义几个 required 属性,来让 TreeView 填充(之前的 View 都是用附加属性来访问相关的信息,不知道为什么 TreeView 成了自定义属性),分别为以下五个属性:
//指向包含delegate Item的TreeView
required property TreeView treeView
//项目是否代表树中的一个节点
//视图中只有一列将用于绘制树,因此,只有该列中的delegate Item项才会将此属性设置为true。
//树中的节点通常应根据其缩进,如果是则depth显示指示符。
//其他列中的delegate Item将将此属性设置为,并将显示模型中其余列的数据(通常不缩进)。
required property bool isTreeNode
//绘制的model Item是否在视图中展开
required property bool expanded
//绘制的model Item是否在模型中有子项
required property int hasChildren
//包含delegate绘制的model Item的深度。model Item的深度与其在模型中的祖先数量相同
required property int depth
TreeView 的 model 和 QTreeView 定义方式差不多,可以查看 Qt 自带的示例。在我的 demo 中只写了一个最简单的模板。主要有以下几个接口需要重写:
//主要是将节点指针装载到 QModelIndex 中,访问节点属性时再取出
QModelIndex index(int row, int column,
const QModelIndex &parent = QModelIndex()) const override;
//获取父节点信息,和 index 的操作流程差不多
QModelIndex parent(const QModelIndex &index) const override;
//获取该节点子级行数,也就是子节点的总数。行数列数影响 delegate 的实例化个数
int rowCount(const QModelIndex &parent = QModelIndex()) const override;
//获取该节点子级列数
int columnCount(const QModelIndex &parent = QModelIndex()) const override;
//获取节点信息
//习惯 ListView 就用 role 来区分,但是得重写 roleNames() 接口
//习惯 TableView 就用行列号来区分
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
效果展示:
代码链接:https://github.com/gongjianbo/MyTestCode/tree/master/Qml/TestQml_20220422_Qt6TreeView
主要代码(model+view):
#pragma once
#include <QAbstractItemModel>
#include <QSharedPointer>
#include <qqml.h>
//自定义树节点
struct MyTreeItem
//节点属性
QString name;
QString detail;
//节点位置
int row;
//父节点
QSharedPointer<MyTreeItem> parentItem;
//子节点列表
QList<QSharedPointer<MyTreeItem>> subItems;
//treeview数据model
class MyTreeModel : public QAbstractItemModel
Q_OBJECT
QML_ELEMENT
private:
enum RoleType
NameRole = Qt::UserRole
,DetailRole
public:
explicit MyTreeModel(QObject *parent = nullptr);
//需要重写的基类接口
QModelIndex index(int row, int column,
const QModelIndex &parent = QModelIndex()) const override;
QModelIndex parent(const QModelIndex &index) const override;
int rowCount(const QModelIndex &parent = QModelIndex()) const override;
int columnCount(const QModelIndex &parent = QModelIndex()) const override;
QVariant data(const QModelIndex &index, int role = Qt::DisplayRole) const override;
QHash<int, QByteArray> roleNames() const override;
//初始化数据
Q_INVOKABLE void resetItems();
private:
MyTreeItem *getItem(const QModelIndex &idx) const;
private:
//根节点
QSharedPointer<MyTreeItem> rootItem;
#include "MyTreeModel.h"
MyTreeModel::MyTreeModel(QObject *parent)
: QAbstractItemModel(parent), rootItem(new MyTreeItem)
QModelIndex MyTreeModel::index(int row, int column, const QModelIndex &parent) const
if(!hasIndex(row, column, parent))
return QModelIndex();
MyTreeItem *parentItem = getItem(parent);
auto childPtr = parentItem->subItems.at(row);
if (childPtr){
return createIndex(row, column, childPtr.get());
}else{
return QModelIndex();
QModelIndex MyTreeModel::parent(const QModelIndex &index) const
if(!index.isValid()){
return QModelIndex();
MyTreeItem *childItem = getItem(index);
auto parentPtr = childItem->parentItem;
if(!parentPtr || parentPtr == rootItem){
return QModelIndex();
return createIndex(parentPtr.get()->row, 0, parentPtr.get());
int MyTreeModel::rowCount(const QModelIndex &parent) const
MyTreeItem *parentItem = getItem(parent);
return parentItem->subItems.size();
int MyTreeModel::columnCount(const QModelIndex &parent) const
Q_UNUSED(parent)
return 2;
QVariant MyTreeModel::data(const QModelIndex &index, int role) const
if(!index.isValid()){
return QVariant();
MyTreeItem *item = getItem(index);
if(role == Qt::DisplayRole){
//TreeView继承自TableView,所以可以通过不同的column来取单元格数据
role = Qt::UserRole + index.column();
switch (role) {
case NameRole: return item->name;
case DetailRole: return item->detail;
default: break;
return QVariant();
QHash<int, QByteArray> MyTreeModel::roleNames() const
QHash<int, QByteArray> names = QAbstractItemModel::roleNames();
names.insert(QHash<int, QByteArray>{
{NameRole, "name"}
,{DetailRole, "detail"}
return names;
void MyTreeModel::resetItems()
beginResetModel();
for(int i=0; i<10; i++)
QSharedPointer<MyTreeItem> lv1{new MyTreeItem};
lv1->parentItem = rootItem;
rootItem->subItems.append(lv1);
lv1->row = i;
lv1->name = QString("lv1-%1").arg(i);
lv1->detail = QString("detail-%1").arg(i);
for(int j=0; j<10; j++)
QSharedPointer<MyTreeItem> lv2{new MyTreeItem};
lv2->parentItem = lv1;
lv1->subItems.append(lv2);
lv2->row = j;
lv2->name = QString("lv2-%1-%2").arg(i).arg(j);
lv2->detail = QString("detail-%1-%2").arg(i).arg(j);
endResetModel();
qDebug()<<__FUNCTION__<<rowCount()<<columnCount();
MyTreeItem *MyTreeModel::getItem(const QModelIndex &idx) const
if(idx.isValid()){
MyTreeItem *item = static_cast<MyTreeItem*>(idx.internalPointer());
if(item){
return item;
return rootItem.get();
import QtQuick
import QtQuick.Controls
import MyModel
TreeView {
id: control
model: MyTreeModel {
id: tree_model
Component.onCompleted: {
tree_model.resetItems();
//可以用预定义的TreeViewDelegate样式,也可以自定义
//delegate: TreeViewDelegate { }
delegate: Item {
id: root
implicitWidth: padding + label.x + label.implicitWidth + padding
implicitHeight: label.implicitHeight * 1.5
readonly property real indent: 20
readonly property real padding: 5
//标记为required的属性将由TreeView填充,与附加属性类似。
//delegate间接通知TreeView它应该负责为它们分配值。可以将以下必需属性添加到delegate:
//指向包含delegate Item的TreeView
required property TreeView treeView
//项目是否代表树中的一个节点
//视图中只有一列将用于绘制树,因此,只有该列中的delegate Item项才会将此属性设置为true。
//树中的节点通常应根据其缩进,如果是则depth显示指示符。
//其他列中的delegate Item将将此属性设置为,并将显示模型中其余列的数据(通常不缩进)。
required property bool isTreeNode
//绘制的model Item是否在视图中展开
required property bool expanded
//绘制的model Item是否在模型中有子项
required property int hasChildren
//包含delegate绘制的model Item的深度。model Item的深度与其在模型中的祖先数量相同
required property int depth
//鼠标点击
TapHandler {
onTapped: treeView.toggleExpanded(row)
Text {
id: indicator
visible: root.isTreeNode && root.hasChildren
x: padding + (root.depth * root.indent)
text: root.expanded ? "▼" : "▶"
Text {
id: label
x: padding + (root.isTreeNode ? (root.depth + 1) * root.indent : 0)
width: root.width - root.padding - x
clip: true
text: model.display
QTreeView Checkboxes
需要实现一个功能:在QT的TreeView中,能够使用复选框,并且选中父节点的复选框可以全选或取消子节点的复选框。
参考链接:
http://blog.csdn.net/ajaxhe/article/details/7518285
主要参考了官方demo,Simple Tree Model Example
借鉴了https://blog.csdn.net/shado_walker/article/details/56495059中roleNames()函数的写法
由于官方的demo是基于qt widgets的,我的目的是在qml中使用TreeView,所以将代码记录如下
.pro文件
QT += quick core qml widgets gui
CONFIG += c++11
# The following.
下图为节点添加删除示例图,其中包含添加顶级节点、添加子节点、移除节点等操作;源码在本文第三节(源码含详细注释)。
下图为节点对节点值的操作,其中包含获取值、设置值等;源码在本文第三节(源码含详细注释)。
这里我们将QTreeView和QTableView对比一下
CMainWindow.cpp
四、拓展:上级节点的获取与判断
本文对于节点的判断是通过data设置用户定义值操作的,还有一种方法,是通过获取当前位置的QModelIndex对象获取其父对象的QModelIndex判断,代码如下(下方代码仅适用于
Qt Quick 是 Qt6中使用的用户界面技术的总称。它是在Qt 4引入的,现在扩展到Qt 6。Qt Quick 本身就是几种技术的集合:
- QML-用于用户界面的标记语言
- JavaScript-动态脚本语言
- Qt C + +-高度可移植的增强型 c + + 库
在QML树控件TreeView的使用(上)篇中,主要介绍了TreeView的使用以及数据的加载显示,在本篇中,将主要介绍TreeModel类的增加数据与删除数据,对树控件TreeView的更新操作。
首先,在TreeView的某个节点增加数据如下:
void TreeModel::appendChild(const QModelIndex& index)
TreeItem* clickI
在Qt5.5之前是没有树控件的,我们在使用时用的是ListView来构造出一个树,Qt5.5之后的QML开发阶段,有了树控件TreeView,本篇着重记录QML的TreeView的使用。根据MVC分解文件(类)如下:
TreeController.h TreeController.cpp
TreeModel.h TreeModel.cpp
TreeItem.c TreeItem.cpp
TreeView是在Qt6.3中加入的,弥补了Qt中无官方树图。笔者上手尝试了下,虽然有点麻烦,但官方也做了不少简化。本次教程,笔者创建一个简单的示例,以帮助读者使用TreeView。