Qt实现表格树控件-自绘树节点虚线

原文链接：qt实现表格树控件-自绘树节点虚线

一、开心一刻

一程序员第一次上女朋友家她妈板着脸问：你想娶我女儿，有多少存款？

程序员低了下头：五百！

她妈更鄙视了：才五百块，买个厕所都不够！

程序员忙说：不是人民币！

她妈：就算是美元，还是不够买厕所！

程序员：其实是比特币！

她妈：哇，贤婿，我给你买只大龙虾去

二、自绘树节点？

自绘树节点？听起来都挺复杂的，可是为什么还要自绘树节点呢？这充分说明产品的脑子是什么东西都能想出来的。

有一天产品说我们的软件里缺少一个美丽的树控件，然后就要求开发去实现这个功能。

对于有一定开发经验的同学可能直接会去百度，或者上qt帮助文档上查找资料，然后发现直接设置qss就能达到我们需要的效果，于是一顿操作后，发现效果还是不错滴。

setstylesheet(""
    "qtreeview {outline:none;show-decoration-selected: 1;}"
    "qtreeview {outline:none;border:0px;}"
    "qtreeview::branch{     background-color: transparent;  }"
    "qtreeview::item:hover, qtreeview::branch:hover { background-color: transparent;border-color: rgb(255, 0, 0);}"
    "qtreeview::item:selected, qtreeview::branch:selected { background-color: #c5e0f7;}"
    "qtreeview::branch:open:has-children{image: url(:/branch-expand.png);}"
    "qtreeview::branch:closed:has-children{image: url(:/branch-collapse.png);}"
    "qtreeview::branch:has-siblings:!adjoins-item{border-image:url(:/branch-line.png) 0;}"
    "qtreeview::branch:has-siblings:adjoins-item{border-image:url(:/branch-more.png) 0;}"
    "qtreeview::branch:!has-children:!has-siblings:adjoins-item{border-image:url(:/branch-end.png) 0;   }"
    "qtreeview::branch:has-children:!has-siblings:closed,qtreeview::branch:closed:has-children:has-siblings{border-image:none;image: url(:/branch-collapse.png);    }"
    "qtreeview::branch:open:has-children:!has-siblings,qtreeview::branch:open:has-children:has-siblings{border-image:none;image: url(:/branch-expand.png);  }"
    );

遂找来产品验证，当产品看到这个效果后，脸直接都绿了。

产品：我不是说要一个树形控件吗？行高需要能动态调整那种！

开发：。。。

开发：行高调整了，那branch上贴的图拉伸后不是模糊了么。。。

产品：。。。

产品：我不管，这个行高可拖拽功能很重要，怎么实现我不管，但是功能必须要有。

开发：卧槽，看来只有出终极大法了，直接自绘吧

三、效果展示

如下图所示，是一个简单的树branch自绘效果。

此处主要是展示一个demo效果，如果需要美化需要专业设计师出图来做。

四、实现思路

既然要自己绘制树形节点，那必然要去研究qt的源码。

1、可扩展接口

首先我们打开qtreeview类的帮助文档，查找这个类都有哪些可供重写的接口，然后就发现了这么几个函数

看名字大概都知道是什么意思，不过这里还是做简要说明

函数名 | 含义
--- | ---
drawbranches| 绘制branch
drawrow | 绘制行
drawtree | 绘制树
indexrowsizehint | 默认行高
rowheight| 获取行高

前边提到我们要自己绘制branch线条，但是其余的东西还是要走qt默认的绘制风格，因此在重写绘制函数时，千万不要忘记了调用原有的绘制方法。

表格中前3个函数就是绘制树控件的具体方法，这3个函数搭配起来完成了树控件内容格子的绘制。下面我们来重写这3个函数，分别完成我们的需求

2、函数重写

a、绘制行drawrow

drawrow顾名思义就是绘制一行的意思，这里也确实如此。为什么要重写这个函数呢？答案也很简单。

树控件本身是不具有垂直分割线的，既然我们要模拟表格的样式，那么垂直分割线必然是需要的。

实现代码可能像下面这样，是不是很简单。

void frozentreeview::drawrow(qpainter * painter, const qstyleoptionviewitem & options, const qmodelindex & index) const
{
    qtreeview::drawrow(painter, options, index);

    //绘制网格线
    qpen pen;
    pen.setwidth(m_iwidth);
    pen.setcolor(m_gridlinecolor);

    painter->save();
    painter->setpen(pen);
    painter->drawrect(options.rect);
    painter->restore();
}

b、绘制branch

绘制行函数主要是添加了单元格边框绘制，接下来就是第一列的branch绘制。

绘制branch时一定不要忘记调用原有的绘制函数，否则界面显示会异常。

{
    painter->save();
    qtreeview::drawbranches(painter, rect, index);
    painter->restore();
}

绘制branch时主要是根据当前节点是否展开、是否有孩子节点、是否有兄弟节点等状态来联合判断并进行绘制

如下是绘制代码，可能有些长，但是应该比较好理解。

需要注意的点

除根节点外，每个节点都需要绘制文字前边的水平线
有父亲的节点需要绘制垂直线。绘制的竖线是否绘制到底，取决于是否有向下的兄弟
有爷爷的节点可能需要额外绘制向下的竖线。是否绘制取决于自己的父亲是否有向下的兄弟
规则3其实是一个循环的处理，也就是说爷爷如果有爸爸，也就是说节点如果有祖爷爷，那么可能还需要绘制更多的向下竖线。是否绘制取决于节点的爷爷是否有向下的兄弟

代码这里就不细说了，有兴趣的可以自己研究研究。绘制规则就是上述4点

//绘制branch
{
    datanode * node = static_cast<datanode *>(index.internalpointer());
    bool haschild = node->children().size() != 0;//是否有孩子

    qlist<datanode *> & children = node->parent()->children();
    bool has_next_siblings = children.indexof(node) != (children.size() - 1);//是否有向后的兄弟
    bool has_pre_siblings = children.indexof(node) != 0;//是否有向前的兄弟

    int level = node->level();
    int indentaion = indentation();//缩进
    int indentaions = indentaion * (level - 1);//缩进距离

    qrect r = rect;
    r.setleft(r.left() + indentaions);//图标绘制位置

    painter->save();
    painter->setpen(m_branchline);

    bool expaned = isexpanded(index);//节点是否展开

    qline line(r.center() + qpoint(0, r.top() - r.center().y()), r.center() + qpoint(0, r.bottom() - r.center().y()));
    line.translate(-indentaion, 0);
    //qline line(r.topleft(), r.bottomleft());
    //循环绘制(具有兄弟节点的)父节点向下的竖线
    datanode * parent_node = node->parent();
    datanode * sub_node = node;
    bool isneed = node->children().size() == 0;
    for (int i = level - 1; i >= 0; --i)
    {
        qlist<datanode *> & children = parent_node->children();
        bool has_next_siblings = children.indexof(sub_node) != (children.size() - 1);//父节点是否有(向后的)兄弟

        if (has_next_siblings)
        {
            painter->drawline(line);
        }
        

        if (level - 1 == i)
        {
            qpoint pos = (line.p1() + line.p2()) / 2;
            qpoint pos2 = pos + qpoint(indentaion / 2, 0);

            painter->drawline(pos, pos2);

            if (!has_next_siblings)
            {
                painter->drawline(line.p1(), (line.p1() + line.p2()) / 2);
            }
        }

        sub_node = parent_node;
        parent_node = parent_node->parent();
        line.translate(-indentaion, 0);
    }

    qpixmap pix;
    if (expaned)
    {
        if (haschild)
        {
            pix = qpixmap(":/branch-expand.png");
        }
    }
    else
    {
        if (haschild)
        {
            pix = qpixmap(":/branch-collapse.png");
        }
    }
    if (pix.isnull() == false)
    {
        qrect pixrect = qrect(qpoint(0, 0), pix.size());
        pixrect.movecenter(r.center());

        if (expaned)
        {
            qline line(r.center(), r.center() + qpoint(0, r.bottom() - r.center().y()));
            painter->drawline(line);
        }

        painter->drawpixmap(pixrect, pix);
    }

    painter->restore();
}

3、同步左侧表头

上一篇文章qt实现表格树控件-支持多级表头中已经说了，我们的表格控件是使用qtableview+qtreeview来实现的，那么我们操作树控件时必然要对表格中的表头进行同步操作了。

树控件折叠时隐藏垂直表头指定行

void collapsed_p(datanode * node)
{
    qlist<datanode *> childnodelist = node->children();
    //datamanager::getinstance()->allchildnode(node, childnodelist);

    int size = childnodelist.size();
    for (int i = 0; i < size; ++i)
    {
        int serial = datamanager::getinstance()->serialnoofnode(childnodelist.at(i));
        vheaderview::instance->setrowhide(serial, true);

        qmodelindex subindex = frozentreeview::instance->rowindex(serial);

        collapsed_p(childnodelist.at(i));
    }
}

void frozentreeview::oncollapsed(const qmodelindex & index)
{
    if (!index.isvalid())
        return;

    datanode * node = static_cast<datanode*>(index.internalpointer());
    if (nullptr == node)
        return;

    collapsed_p(node);
    vheaderview::instance->updatecache();

    //要对水平头的最后一列进行重设大小，引起水平头自己的更新操作，从而使整个界面显示正确
    hheaderview::instance->resizelastsection(true);
}

树控件展开时显示垂直表头指定行

void expanded_p(datanode * node)
{
    qlist<datanode *> childnodelist = node->children();

    int size = childnodelist.size();
    for (int i = 0; i < size; ++i)
    {
        int serial = datamanager::getinstance()->serialnoofnode(childnodelist.at(i));
        vheaderview::instance->setrowhide(serial, false);

        qmodelindex subindex = frozentreeview::instance->rowindex(serial);

        if (frozentreeview::instance->isexpanded(subindex))
        {
            expanded_p(childnodelist.at(i));
        }
    }
}

void frozentreeview::onexpanded(const qmodelindex & index)
{
    datanode * node = static_cast<datanode *>(index.internalpointer());
    if (nullptr == node)
        return;

    vheaderview::instance->blocksignals(true);
    expanded_p(node);
    vheaderview::instance->updatecache();
    vheaderview::instance->blocksignals(false);

    //要对水平头的最后一列进行重设大小，引起水平头自己的更新操作，从而使整个界面显示正确
    hheaderview::instance->resizelastsection(false);
}

五、相关文章

值得一看的优秀文章：

qt定制控件列表
牛逼哄哄的qt库

qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等
qt高仿excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格
属性浏览器控件qttreepropertybrowser编译成动态库(设计师插件)
超级实用的属性浏览器控件--qttreepropertybrowser
qt之表格控件蚂蚁线
qrowtable表格控件-支持hover整行、checked整行、指定列排序等
qt实现表格树控件-支持多级表头
qtableview表格控件区域选择-自绘选择区域

如果您觉得文章不错，不妨给个打赏，写作不易，感谢各位的支持。您的支持是我最大的动力，谢谢！！！

很重要--转载声明

如要转载，请原文转载，如在转载时修改本文，请事先告知，谢绝在转载时通过修改本文达到有利于转载者的目的。

Qt实现表格树控件-自绘树节点虚线

一、开心一刻

二、自绘树节点？

三、效果展示

四、实现思路

1、可扩展接口

2、函数重写

3、同步左侧表头

五、相关文章

相关推荐

Qt如何编写气体安全管理系统实现短信告警

vxe-table vue table表格组件功能

表格JS实现在线Excel的附件上传与下载

快速把PDF文档里的表格粘贴到excel的方法

在DevExpress中使用BandedGridView表格实现多行表头的处理

2021-06-12：已知一棵搜索二叉树上没有重复值的节点，现在有一个数组arr，是这棵搜索二叉树先序遍历的结果。请根据arr生成整棵树并返回头节点。

代码随想录算法训练营Day16二叉树|104.二叉树的最大深度 559.n叉树的最大深度 111.二叉树的最小深度 222.完全二叉树的节点个数

vue对vue-giant-tree进行节点操作