您当前的位置: 首页 >  qt

龚建波

暂无认证

  • 5浏览

    0关注

    313博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

Qt6 QML TreeView 基本使用

龚建波 发布时间:2022-04-24 01:36:43 ,浏览量:5

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; iparentItem = 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; jparentItem = 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()            
关注
打赏
1655829268
查看更多评论
0.0595s