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

news2024/11/18 13:34:29

一、开心一刻

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

程序员低了下头：五百！

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

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

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

程序员：其实是比特币！

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

二、自绘树节点？

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

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

对于有一定开发经验的同学可能直接会去百度，或者上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);
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/112899.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Android混淆技术综述

Android混淆技术综述

1. 引入 大量的恶意软件都使用了混淆技术来逃检测。查了下Android混淆技术&#xff0c;看了如下两篇资料&#xff1a; Understanding Android Obfuscation Techniques: A Large-Scale Investigation in the Wildhttps://github.com/ClaudiuGeorgiu/Obfuscapk 对Android的混淆…
阅读更多...
logging日志管理

logging日志管理

1.日志作用 不管是在项目开发还是测试过程中&#xff0c;项目运行一旦出现问题日志信息就非常重要了。日志是定位问题的重要手段&#xff0c;就像侦探人员要根据现场留下的线索来推断案情。 2.日志级别 脚本运行会有很多的情况&#xff0c;比如调试信息、报错异常信息等。日…
阅读更多...
渣土车空车未盖盖识别系统 OpenCv

渣土车空车未盖盖识别系统 OpenCv

渣土车空车未盖盖识别系统通过OpenCvyolo网络模型实时检测路过的渣土车情况&#xff0c;发现空车未盖盖立即进行抓拍回传。OpenCV基于C实现&#xff0c;同时提供python, Ruby, Matlab等语言的接口。OpenCV-Python是OpenCV的Python API&#xff0c;结合了OpenCV CAPI和Python语言…
阅读更多...
Android开发中的线程池使用

Android开发中的线程池使用

一、前言 既然Android中已经有了线程的概念&#xff0c;那么为什么需要使用线程池呢&#xff1f;我们从两个方面给出使用线程池的原因。 首先线程的新建和销毁都是存在性能上的消耗的&#xff0c;如果一个时间段有大量的网络请求&#xff0c;那么就需要多个线程的创建与销毁&am…
阅读更多...
NSGA and NSGA-II

NSGA and NSGA-II

目录1 NSGA1.1 传统多目标优化方法1.2 多目标转为单目标的缺点1.3 权重向量距离说明1.4 NSGA方法1.4.1 流程1.4.2 关键步骤1.5 注意2 NSGA-II2.1 NSGA的缺点2.2 NSGA-II在NSGA上的变动2.3 NSGA-II流程1 NSGA 1.1 传统多目标优化方法 使用权重向量&#xff0c;将多目标问题转化…
阅读更多...
Java入门练习题及其答案第一弹

Java入门练习题及其答案第一弹

Java入门练习题及其答案第一弹 文章目录Java入门练习题及其答案第一弹素数打印乘法口诀表最大公约数水仙花数二进制中1的个数二进制奇偶数位素数打印 只能被1和自己整除 import java.util.Scanner;public static void main(String[] args) {Scanner scanner new Scanner(Sys…
阅读更多...
UI自动化测试-第一个测试脚本

UI自动化测试-第一个测试脚本

前提 我们在进行UI自动化测试时&#xff0c;一般采用javaselenium或者pythonselenium的方式。由于python比较简单&#xff0c;上手快&#xff0c;因此建议大家采用pythonselenium的方式来进行UI自动化。 1、安装pycharm PyCharm是一种Python IDE&#xff08;Integrated Deve…
阅读更多...
【OpenCV-Python】教程：7-5 理解SVM

【OpenCV-Python】教程：7-5 理解SVM

OpenCV Python SVM 学习 【目标】 直观理解 SVM 【理论】 线性可分 下图有两种类型的数据&#xff0c;红色和蓝色。在kNN中&#xff0c;对于一个测试数据&#xff0c;我们用来测量它与所有训练样本的距离&#xff0c;并取距离最小的一个。测量所有的距离需要大量的时间&am…
阅读更多...
计算距离春节还有多长时间

计算距离春节还有多长时间

你知道距离春节&#xff0c;还剩下多少时间吗&#xff1f; 或许你已经在默默心算了。 可是&#xff0c;如果我想要精确一点的结果&#xff0c;比如精确到多少分钟、多少秒呢&#xff1f; 要怎么计算呢&#xff1f; 这里可以使用Python进行计算。 首先&#xff0c;需要导入…
阅读更多...
Opencv项目实战：18 人体姿态检测

Opencv项目实战：18 人体姿态检测

目录 0、项目介绍 1、效果展示 2、项目搭建 3、项目代码讲解与介绍 Basics.py PoseModule.py Example.py 人体姿态图​编辑 4、项目资源 5、项目总结 0、项目介绍 mediapipe中有人体姿态检测的功能&#xff0c;今天我们就将实现最最基础的人体姿态估计项目&#xff0c;它…
阅读更多...
【C++】深拷贝和浅拷贝

【C++】深拷贝和浅拷贝

目录 浅拷贝 深拷贝 字符串的构造 例有两个类的深拷贝&#xff1a; 浅拷贝 在类中&#xff0c;若我们不写拷贝构造函数&#xff0c;则程序会提供一个默认的拷贝构造函数&#xff0c;该函数为浅拷贝。 //默认拷贝构造 ---浅拷贝--值复制 类名(const 类名& 形参名) {成…
阅读更多...
【实时数仓】DWS层之商品主题计算、地区主题表（FlinkSQL）

【实时数仓】DWS层之商品主题计算、地区主题表（FlinkSQL）

文章目录一 DWS层-商品主题计算1 把JSON字符串数据流转换为统一数据对象的数据流&#xff08;1&#xff09;转换订单宽表流数据&#xff08;2&#xff09;转换支付宽表流数据2 把统一的数据结构流合并为一个流&#xff08;1&#xff09;代码&#xff08;2&#xff09;测试3 设定…
阅读更多...
216. 组合总和 III

216. 组合总和 III

216. 组合总和 III 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一次 返回 所有可能的有效组合的列表 。该列表不能包含相同的组合两次&#xff0c;组合可以以任何顺序返回。 示例 1: 输入: k 3, n 7 输…
阅读更多...
3.2 Static Terrestrial Laser Scanners 静态地基激光扫描仪

3.2 Static Terrestrial Laser Scanners 静态地基激光扫描仪

本章节介绍的静态地基激光扫描系统指的是那些在一个固定位置的位置上对周边场景地物特征进行扫描的设备。该类型设备的扫描测量机制是&#xff0c;通过激光测距仪进行斜距测量&#xff0c;与此同时通过水平和竖直两个方向上同步运动的角度编码器来记录角度变化值&#xff08;如…
阅读更多...
编译原理——正规式、NFA构造DFA

编译原理——正规式、NFA构造DFA

一、DFA和NFA的区别 NFA&#xff1a;非确定有限自动机 DFA&#xff1a;确定有限自动机 NFA在同一状态&#xff0c;可以有多条出边&#xff0c;DFA在同一状态&#xff0c;只能有一条出边&#xff1b; NFA的初态可以具有多个&#xff0c;DFA的初态是唯一的&#xff1b; 比如这个…
阅读更多...
数据结构入门——栈和队列详解

数据结构入门——栈和队列详解

栈和队列详解1 栈1.1 栈的概念及结构1.2 栈的实现1.3 支持动态增长的栈1.3.1 结构声明1.3.2 栈的初始化和销毁1.3.3 入栈和出栈操作1.3.4 栈的判空和元素个数2 队列2.1 队列的概念及结构2.2 队列的实现2.3 链表实现队列2.3.1 结构声明2.3.2 队列的初始化和销毁2.3.3 队列入队和…
阅读更多...
【工作流Activiti7】4、Activiti7 结束/终止流程

【工作流Activiti7】4、Activiti7 结束/终止流程

1. 结束/终止 正在运行的流程实例 思路&#xff1a;跟回退一样的思路一样&#xff0c;直接从当前节点跳到结束节点&#xff08;EndEvent&#xff09; /*** 结束任务* param taskId 当前任务ID*/ public void endTask(String taskId) {// 当前任务Task task taskService…
阅读更多...
Tomcat学习

Tomcat学习

文章目录1、Tomcat是什么&#xff1f;2、Tomcat安装部署java环境部署tomcat目录结构介绍webapps目录bin目录tomcat启停方式3、Tomcat配置文件tomcat-users.xmlserver.xml结构组件详情配置文件注释4、Tomcat端口5、JVM调优6、Tomcat启动慢解决7、Tomcat面试题目1.Tomcat的默认端…
阅读更多...
npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称

一、问题描述 首次用vscode运行vue项目时&#xff0c;报错&#xff1a; npm : 无法将“npm”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。 二、解决 我的解决过程&#xff1a;检查是否安装node.js环境 已安装node 这样一来&#xff0c;真不知道怎么回事了。环境也没有…
阅读更多...
五、Arduino IDE开发esp8266环境搭建

五、Arduino IDE开发esp8266环境搭建

1、安装驱动程序 (1)安装USB转串口驱动程序。 (2)根据板载的USB转串口驱动芯片选择合适驱动安装。USB转串口芯片负责和电脑之间进行数据通信。 (3)常见USB转串口驱动 CP210x驱动:CP210x USB 至 UART 桥 VCP 驱动器 - 芯科科技 CH340驱动 2、Arduino IDE环境搭建 要想使用Ar…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023