treeview

Qt6 QML TreeView 基本使用

龚建波

已于 2022-07-17 11:42:34 修改

阅读量4.4k
 收藏 11

点赞数 3
分类专栏： QML 三言两语 文章标签： QML TreeView
版权

QML 三言两语
专栏收录该内容
84 篇文章194 订阅
订阅专栏
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
#include
#include
 
//自定义树节点
struct MyTreeItem
{
    //节点属性
    QString name;
    QString detail;
 
    //节点位置
    int row;
    //父节点
    QSharedPointer parentItem;
    //子节点列表
    QList> 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 roleNames() const override;
 
    //初始化数据
    Q_INVOKABLE void resetItems();
 
private:
    MyTreeItem *getItem(const QModelIndex &idx) const;
 
private:
    //根节点
    QSharedPointer 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 MyTreeModel::roleNames() const
{
    QHash names = QAbstractItemModel::roleNames();
    names.insert(QHash{
                     {NameRole, "name"}
                     ,{DetailRole, "detail"}
                 });
    return names;
}
 
void MyTreeModel::resetItems()
{
    beginResetModel();
    for(int i=0; i<10; i++)
    {
        QSharedPointer 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 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__< }
 
MyTreeItem *MyTreeModel::getItem(const QModelIndex &idx) const
{
    if(idx.isValid()){
        MyTreeItem *item = static_cast(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
        }
    }
}
————————————————

                            版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
                        
原文链接：https://blog.csdn.net/gongjianbo1992/article/details/124373674