原文链接: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时主要是根据当前节点是否展开、是否有孩子节点、是否有兄弟节点等状态来联合判断并进行绘制

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

需要注意的点

  1. 除根节点外,每个节点都需要绘制文字前边的水平线
  2. 有父亲的节点需要绘制垂直线。绘制的竖线是否绘制到底,取决于是否有向下的兄弟
  3. 有爷爷的节点可能需要额外绘制向下的竖线。是否绘制取决于自己的父亲是否有向下的兄弟
  4. 规则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);
}

五、相关文章


值得一看的优秀文章:

  1. 财联社-产品展示
  2. 广联达-产品展示
  3. Qt定制控件列表
  4. 牛逼哄哄的Qt库

  1. Qt实现表格控件-支持多级列表头、多级行表头、单元格合并、字体设置等

  2. Qt高仿Excel表格组件-支持冻结列、冻结行、内容自适应和合并单元格

  3. 属性浏览器控件QtTreePropertyBrowser编译成动态库(设计师插件)

  4. 超级实用的属性浏览器控件--QtTreePropertyBrowser

  5. Qt之表格控件蚂蚁线

  6. QRowTable表格控件-支持hover整行、checked整行、指定列排序等

  7. Qt实现表格树控件-支持多级表头

  8. QTableView表格控件区域选择-自绘选择区域

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

很重要--转载声明

  1. 本站文章无特别说明,皆为原创,版权所有,转载时请用链接的方式,给出原文出处。同时写上原作者:朝十晚八 or Twowords

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


Qt实现表格树控件-自绘树节点虚线的更多相关文章

  1. EasyUI加载树控件自动展开所有目录

    在这里如何加载树控件就不在熬述,在加载树控件后,树的节点全部展开,要在OnLoadSuccess事件中写代码:

  2. Qt实现表格树控件-支持多级表头

    目录 一.概述 二.效果展示 三.实现方式 四.多级表头 1.数据源 2.表格 3.QStyledItemDelegate绘制代理 五.测试代码 六.相关文章 原文链接:Qt实现表格树控件-支持多级表 ...

  3. 表格树控件QtTreePropertyBrowser编译成动态库(设计师插件)

    目录 一.回顾 二.动态库编译 1.命令行编译动态库和测试程序 2.vs工具编译动态库和测试程序 3.安装文档 4.测试文档 三.设计师插件编译 1.重写QDesignerCustomWidgetIn ...

  4. 超级实用的表格树控件--QtTreePropertyBrowser

    目录 一.源码下载 二.代码编译 1.intersect函数替换为intersected 2.移除UnicodeUTF8 3.QtGui模块拆分 4.Q_TYPENAME错误 5.qVariantVa ...

  5. Qt qml treeview 树控件

    qml并没有提供树控件,只能自己写了.model仍然用ListModel对象,弄成层级的就行.delegate必须用loader动态的增加子控件,如此而已. [先看效果] [下载] http://do ...

  6. Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置

    QtreeView是ui中最常用的控件,Qt中QTreeWidget比QTreeView更简单,但没有QTreeView那么灵活(QTreeWidget封装的和MFC的CTreeCtrl很类似,没有m ...

  7. PyQt5复杂控件(树控件、选项卡控件(滚动条控件、多文档控件、停靠控件)

    1.树控件的基本使用方法QTreeWidget'''QTreeWidget树控件的使用方法添加图标,添加表格,添加复选框等'''from PyQt5.QtWidgets import *from Py ...

  8. 在Qt中使用ActiveX控件

    Qt的windows商业版本提供了ActiveQt这个framework,使用这个组件我们可以在Qt中使用ActiveX控件,并且也开发基于Qt的ActiveX控件.ActiveQt包含了两个组件QA ...

  9. Qt中使用ActiveX控件

    (转自:http://blog.csdn.net/tingsking18/article/details/5403038) 在Qt中使用ActiveX控件 Qt的windows商业版本提供了Activ ...

随机推荐

  1. 找不到 main 方法

    前几天打开了好久不用的eclipse,发现报了个奇怪的错误 ***中找不到 main 方法, 请将 main 方法定义为: public static void main(String[] args) ...

  2. 如何使用 Docker 安装 Jenkins

    说在前面 本篇内容非常简单,仅讲述了如何快速在 Docker 上部署一个 Jenkins 实例,不涉及其他. 本文实验环境: 操作系统:Centos 7.5 Docker Version:18.09. ...

  3. HDU 4055:Number String(DP计数)

    http://acm.hdu.edu.cn/showproblem.php?pid=4055 题意:给一个仅包含‘I','D','?'的字符串,’I'表示前面的数字比后面的数字要小(Increase升 ...

  4. 网络下载器 迅雷大众版 v7.9.42.5050 精简绿色版

    下载地址:点我 基本介绍 迅雷大众版是一款采用了先进的超线程技术基于网格原理,能够将存在于第三方服务器和计算机上的数据文件进行有效整合,通过这种先进的超线程技术,用户能够以更快的速度从这些第三方节点平 ...

  5. springcloud-eureka客户端服务注册(含demo源码)

    1. 场景描述 前几天介绍了下springcloud的Eureka注册中心(springcloud-注册中心快速构建),今天结合springboot-web介绍下eureka客户端服务注册. 2. 解 ...

  6. python笔记(1)--序列(列表 元组 range)

    一.序列分类 1.可变序列:list 2.不可变序列:tuple,range 二.序列公共操作方法 1.操作和返回值 其中s和t代表同类型序列:n,i,j,k为整数:x为任意类型. 序号 操作 结果 ...

  7. [算法]Python判断一个点是否在多边形内部

    题目: 代码: # -*- coding:utf-8 -*- def rayCasting(p, poly): px = p['x'] py = p['y'] flag = False i = 0 l ...

  8. JAVA面试题 线程的生命周期包括哪几个阶段?

    面试官:您知道线程的生命周期包括哪几个阶段? 应聘者: 线程的生命周期包含5个阶段,包括:新建.就绪.运行.阻塞.销毁. 新建:就是刚使用new方法,new出来的线程: 就绪:就是调用的线程的star ...

  9. [leetcode] 486. Predict the Winner (medium)

    原题 思路: 解法一: 转换比较拿取分数多少的思路,改为考虑 player拿的分数为正,把Player2拿的视为负,加上所有分数,如果最后结果大于0则Player1赢. 思考得出递归表达式: max( ...

  10. python基础练习 斐波那契数列

    转载于知乎刘奕聪的方法 一 f = [1, 1]print([f.append((f[-1] + f[-2])) or f.pop(0) for i in range(100)]) ///  f.ap ...