Qt6 QML TreeView 基本使用

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_OBJECTQML_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 MyModelTreeView {id: controlmodel: MyTreeModel {id: tree_modelComponent.onCompleted: {tree_model.resetItems();}}//可以用预定义的TreeViewDelegate样式，也可以自定义//delegate: TreeViewDelegate { }delegate: Item {id: rootimplicitWidth: padding + label.x + label.implicitWidth + paddingimplicitHeight: label.implicitHeight * 1.5readonly property real indent: 20readonly property real padding: 5//标记为required的属性将由TreeView填充，与附加属性类似。//delegate间接通知TreeView它应该负责为它们分配值。可以将以下必需属性添加到delegate：////指向包含delegate Item的TreeViewrequired 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: indicatorvisible: root.isTreeNode && root.hasChildrenx: padding + (root.depth * root.indent)text: root.expanded ? "▼" : "▶"}Text {id: labelx: padding + (root.isTreeNode ? (root.depth + 1) * root.indent : 0)width: root.width - root.padding - xclip: truetext: model.display}}
}

Qt6 QML TreeView 基本使用相关推荐

[Qt6][QML][教程]Image控件图片的更新以及相对路径的访问
最近用Qt6+QML仿制网易云切歌时候MAC的通知界面,调用Image控件的时候发现了一些问题. 教程被应用在MediaStateT中 MediaStateT Github项目地址: https:// ...
Qt5 QML TreeView currentIndex当前选中项的一些问题
0.前言 Qt5 QML Controls1.4 中的 TreeView 存在诸多问题,比如节点连接的虚线不好实现,currentIndex 的设置和 changed 信号的触发等.我想主要的原因在于 ...
Qt6 QML Book/QtQuick控件/图像查看器
An Image Viewer 图像查看器 Let's look at a larger example of how Qt Quick Controls are used. For this, we ...
Qt6 QML Book/多媒体/播放媒体
Playing Media 播放媒体 The most basic case of multimedia integration in a QML application is for it to p ...
Qt6 QML Book/图形效果/粒子群组
Particle Groups 粒子群组 At the beginning of this chapter, we stated particles are in groups, which is b ...
Qt6 QML Book/Qt Quick 3D/材料和灯光
Materials and Light 材料和灯光 Up until now, we've only worked with basic materials. To create a convinci ...
html5手机号输入框,input输入框限制（座机，手机号码）
记录一下座机input输入框: 手机input输入框: 说明: 座机限制只能输入数字和"-"且最大长度20位,手机限制只能输入数字且最大长度11位. 存在一个问题,当是搜狗输入法 ...
ui设计师与开发人员的沟通_开发人员和设计师的27种免费资源
ui设计师与开发人员的沟通 Design is the face of your product, service or content, without good designs, even if ...
关于TreeView的简单使用（Qt6.4.1)
前言 TreeView是在Qt6.3中加入的,弥补了Qt中无官方树图.笔者上手尝试了下,虽然有点麻烦,但官方也做了不少简化. 本次教程,笔者创建一个简单的示例,以帮助读者使用TreeView. 一.创 ...

Qt6 QML TreeView 基本使用

Qt6 QML TreeView 基本使用相关推荐

最新文章

热门文章