Qt之实现自定义树状图控件

已于 2022-04-08 09:53:20 修改
阅读量1.1w 收藏 110
点赞数 12
分类专栏： Qt之控件讲解篇 文章标签： Qt 自定义树控件 QQ好友列表 好友列表 QQ
于 2019-08-09 17:38:21 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/GoForwardToStep/article/details/98968146
版权
本文分享了一个使用Qt制作的自定义树控件，通过ListWidget和自定义Widget组合成节点，形成类似树状图的效果。该控件适用于创建如QQ好友列表的应用，虽然原始的QQ列表代码丢失，但通过调整此控件仍能实现类似功能。完整代码可在指定QQ群获取。
摘要由CSDN通过智能技术生成

一、简述

这是好久之前做的一个树控件，挺好玩的就拿出来分享一下.
代码的主要思路是是通过一个ListWidget和一个自定义的Widget进行组合成为一个节点，然后多个这样的控件进行组合，类似树控件的一个展示效果。

在这里插入图片描述 在这里插入图片描述

通过这个控件可以做成QQ好友列表的效果，之前有做过一版QQ列表，已经做完了，可惜代码找不到了…
不过只需要修改这两个控件就可以做成QQ好友列表的样子了，如果代码找到了，到时候可以在群里分享一下。
在这里插入图片描述

二、代码之路

CustomTreeWidget.h

#include <QtWidgets/QWidget>
#include <QLabel>
#include <QHBoxLayout>
#include <QPainter>
#include <QListWidget>
#include <QScrollbar>
#include <QMouseEvent>
#include <QScrollArea>
#include <QTimer>

#define ITEM_HEIGHT 40	// item高度;

// 传感器数据结构;
struct SensorDataStruct
{
	QColor alarmColor;
	QString sensorName;
	float sensorNumber;
};

// 节点数据结构;
struct NodeDataStruct
{
	QString strNodeName;
	int strNodeCount;
	QColor numberColor;
	QList<SensorDataStruct> sensorDataList;
};



class SensorItemWidget : public QWidget
{
public:
	SensorItemWidget(QWidget* parent = NULL)
		: QWidget(parent)
	{
		initWidget();
		this->setFixedSize(QSize(250, ITEM_HEIGHT));
		this->setStyleSheet(".QWidget:hover{background:rgba(200, 200, 200, 150);}");
	}

    // 设置传感器信息;
	void setSensorInfo(QColor alarmColor, QString sensorName, float sensorNumber)
	{
		m_colorWidget->setStyleSheet(QString("QWidget{border-radius:6px;background:rgb(%1, %2, %3);}").arg(alarmColor.red()).arg(alarmColor.green()).arg(alarmColor.blue()));

		m_sensorLabel->setText(sensorName);
		m_sensorLabel->setScaledContents(true);
		m_numberLabel->setText(QString::number(sensorNumber));
		m_numberLabel->setScaledContents(true);
	}

	
private:
	void initWidget()
	{
		m_colorWidget = new QWidget;
		m_colorWidget->setFixedSize(QSize(12, 12));

		m_sensorLabel = new QLabel;

		m_numberLabel = new QLabel;

		QHBoxLayout* hLayout = new QHBoxLayout(this);
		hLayout->addWidget(m_colorWidget);
		hLayout->addWidget(m_sensorLabel);
		hLayout->addWidget(m_numberLabel);
		hLayout->addStretch();
		hLayout->setSpacing(15);
		hLayout->setContentsMargins(20, 0, 0, 0);
	}

private:
	QWidget* m_colorWidget;
	QLabel* m_sensorLabel;
	QLabel* m_numberLabel;
};


class SencorListWidget : public QWidget
{
	Q_OBJECT

public:
	SencorListWidget(QWidget* parent = NULL)
		: QWidget(parent)
		, m_isFolded(true)
	{
		initWidget();
		this->setWindowFlags(Qt::FramelessWindowHint);

        this->setStyleSheet("QListWidget{border:none;border-bottom:1px solid gray;}");
	}

	// 设置标题栏信息;
	void setTitleInfo(QString strTitle, int count, QColor numberColor)
	{
		m_titleLabel->setText(strTitle);
		m_numberLabel->setText(QString::number(count));
		m_numberLabel->setStyleSheet(QString("color:white;border-radius:8px;background:rgb(%1, %2, %3);").arg(numberColor.red()).arg(numberColor.green()).arg(numberColor.blue()));
	}

	// 添加传感器子项;
	void addSensorItem(QColor alarmColor, QString sensorName, float sensorNumber)
	{
		QListWidgetItem* item = new QListWidgetItem;
		item->setSizeHint(QSize(250, ITEM_HEIGHT));
		m_listWidget->addItem(item);
		SensorItemWidget* itemWidget = new SensorItemWidget;
		itemWidget->setSensorInfo(alarmColor, sensorName, sensorNumber);
		m_listWidget->setItemWidget(item, itemWidget);
	}

	// 更新传感器某一项状态;
	void updateSensorItem(int rowCount, QColor alarmColor, QString sensorName, float sensorNumber)
	{
		QListWidgetItem* item = m_listWidget->item(rowCount);
		if (item != NULL)
		{
			SensorItemWidget* itemWidget = static_cast<SensorItemWidget*>(m_listWidget->itemWidget(item));
			itemWidget->setSensorInfo(alarmColor, sensorName, sensorNumber);
		}
	}

private:
	void initTitleBackWidget()
	{
		m_titleBackWidget = new QWidget;
		m_titleBackWidget->setFixedSize(QSize(250, 40));
		m_titleBackWidget->installEventFilter(this);
		m_titleBackWidget->setStyleSheet(".QWidget{border-bottom:1px solid gray;}\
                                            .QWidget:hover{background:rgba(200, 200, 200, 200);}");

		m_foldStateLabel = new QLabel;
		m_foldStateLabel->setFixedSize(QSize(20, 20));
		m_foldStateLabel->setPixmap(QIcon(":/Resources/Folded.png").pixmap(m_foldStateLabel->size()));

		m_titleLabel = new QLabel;
		m_titleLabel->setStyleSheet("font-size:16px;font-weight:bold;");

		m_numberLabel = new QLabel;
		m_numberLabel->setFixedSize(QSize(16, 16));
		m_numberLabel->setAlignment(Qt::AlignCenter);

		QHBoxLayout* hButtonLayout = new QHBoxLayout;
		hButtonLayout->addWidget(m_numberLabel);
		hButtonLayout->setContentsMargins(0, 0, 0, 10);

        m_foldTagLabel = new QLabel;
        m_foldTagLabel->setFixedSize(QSize(20, 20));
        m_foldTagLabel->setPixmap(QIcon(":/Resources/EnableFold.png").pixmap(m_foldTagLabel->size()));

		QHBoxLayout* hTitleLayout = new QHBoxLayout(m_titleBackWidget);
		hTitleLayout->addWidget(m_foldStateLabel);
		hTitleLayout->addWidget(m_titleLabel);
		hTitleLayout->addLayout(hButtonLayout);
        hTitleLayout->addStretch();
        hTitleLayout->addWidget(m_foldTagLabel);
		hTitleLayout->setSpacing(5);
		hTitleLayout->setContentsMargins(5, 0, 25, 0);
	}

	void initWidget()
	{
		initTitleBackWidget();

		m_listWidget = new QListWidget;
		m_listWidget->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
		m_listWidget->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
		m_listWidget->setVisible(false);

		QVBoxLayout* vMainLayout = new QVBoxLayout(this);
		vMainLayout->addWidget(m_titleBackWidget);
		vMainLayout->addWidget(m_listWidget);
		vMainLayout->addStretch();
		vMainLayout->setSpacing(0);
		vMainLayout->setMargin(0);
	}

	bool eventFilter(QObject *watched, QEvent *event)
	{
		if (watched == m_titleBackWidget)
		{
			if (event->type() == QEvent::MouseButtonRelease)
			{
				QMouseEvent* mouseEvent = static_cast<QMouseEvent*>(event);
				if (mouseEvent->button() == Qt::LeftButton)
				{
                    // 节点点击进行展开收缩;
					if (m_isFolded)
					{
						m_foldStateLabel->setPixmap(QIcon(":/Resources/UnFolded.png").pixmap(m_foldStateLabel->size()));
						m_listWidget->setVisible(true);
						m_listWidget->setFixedHeight(m_listWidget->count() * ITEM_HEIGHT + 10);
						this->setFixedHeight(m_titleBackWidget->height() + m_listWidget->height());
						emit signalNodeFoldChanged(m_titleBackWidget->height() + m_listWidget->height());
					}
					else
					{
						m_foldStateLabel->setPixmap(QIcon(":/Resources/Folded.png").pixmap(m_foldStateLabel->size()));
						m_listWidget->setVisible(false);
						this->setFixedHeight(m_titleBackWidget->height());
						emit signalNodeFoldChanged(m_titleBackWidget->height());
					}
					m_isFolded = !m_isFolded;
				}
			}
		}

		return __super::eventFilter(watched, event);
	}

signals:
	void signalNodeFoldChanged(int itemHeight);

private:
	QLabel* m_foldStateLabel;
	QLabel* m_titleLabel;
	QLabel* m_numberLabel;
    QLabel* m_foldTagLabel;

	QWidget* m_titleBackWidget;
	QListWidget* m_listWidget;

	bool m_isFolded;
};


class CustomTreeWidget : public QWidget
{
	Q_OBJECT

public:
	CustomTreeWidget(QWidget *parent = Q_NULLPTR);

private:
	void initWidget();

private slots:
	void onNodeFoldChanged();

	void onUpdateData();

private:

	QScrollArea* m_scrollArea;

	QList<NodeDataStruct> m_nodeDataList;

	QList<SencorListWidget*> m_nodeWidgetList;

	QWidget* m_sensorBackWidget;


	// 刷新数据时钟;
	QTimer m_refreshTimer;
	int m_refreshIndex; 
};

CustomTreeWidget.cpp

#include "CustomTreeWidget.h"

CustomTreeWidget::CustomTreeWidget(QWidget *parent)
	: QWidget(parent)
	, m_refreshIndex(0)
{
	initWidget();

	this->setFixedSize(QSize(250, 600));

	m_refreshTimer.setInterval(500);
	connect(&m_refreshTimer, &QTimer::timeout, this, &CustomTreeWidget::onUpdateData);
	m_refreshTimer.start();

    this->setStyleSheet("*{font-family:Microsoft YaHei;}\
           QScrollBar::vertical {\
              background:rgb(226,222,221);\
              border:none;\
              width: 5px;\
              margin:0px;\
           }\
           QScrollBar::handle:vertical {\
              background: rgb(192,192,192);\
              border-radius:1px;\
              min-height: 20px;\
              width:5px;\
          }\
          QScrollBar::add-line:vertical {\
              height:0px;\
          }\
          QScrollBar::sub-line:vertical {\
              height:0px;\
          }\
          QScrollBar::add-page:vertical, QScrollBar::sub-page:vertical {\
             background:transparent;\
          }");
}

void CustomTreeWidget::initWidget()
{
	m_scrollArea = new QScrollArea;
	m_scrollArea->setFixedWidth(250);
	m_scrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
	m_scrollArea->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
	m_scrollArea->setStyleSheet(".QScrollArea{background:white;}");

	for (int i = 0; i < 4; i++)
	{
		NodeDataStruct nodeData;
		nodeData.numberColor = Qt::red;
		nodeData.strNodeCount = 6;
		nodeData.strNodeName = QString("Node-%1").arg(i);
		for (int j = 0; j < 6; j ++)
		{
			SensorDataStruct sensorData;
			sensorData.alarmColor = Qt::blue;
			sensorData.sensorName = QString("Sensor-%1").arg(j);
			sensorData.sensorNumber = j;
			nodeData.sensorDataList.append(sensorData);
		}
		m_nodeDataList.append(nodeData);
	}

	m_sensorBackWidget = new QWidget;
	m_sensorBackWidget->setFixedWidth(250);
	m_sensorBackWidget->setStyleSheet(".QWidget{background:white;}");
	QVBoxLayout* vBackWidget = new QVBoxLayout(m_sensorBackWidget);
	vBackWidget->setSpacing(0);
	vBackWidget->setMargin(0);
	// 根据已经造好的数据布局界面;
	for (int i = 0; i < m_nodeDataList.size(); i++)
	{
		NodeDataStruct nodeData = m_nodeDataList[i];
		SencorListWidget* sencorListWidget = new SencorListWidget;
		connect(sencorListWidget, &SencorListWidget::signalNodeFoldChanged, this, &CustomTreeWidget::onNodeFoldChanged);
		// 先设置节点标题信息;
		sencorListWidget->setTitleInfo(nodeData.strNodeName, nodeData.strNodeCount, nodeData.numberColor);
		// 为每个节点添加数据;
		for (int j = 0; j < nodeData.sensorDataList.count(); j++)
		{
			SensorDataStruct sensorData = nodeData.sensorDataList[j];
			sencorListWidget->addSensorItem(sensorData.alarmColor, sensorData.sensorName, sensorData.sensorNumber);
		}

		vBackWidget->addWidget(sencorListWidget);
		m_nodeWidgetList.append(sencorListWidget);
	}
	
	m_scrollArea->setWidget(m_sensorBackWidget);

	QHBoxLayout* hMainLayout = new QHBoxLayout(this);
	hMainLayout->addWidget(m_scrollArea);
	hMainLayout->setMargin(0);
}

void CustomTreeWidget::onNodeFoldChanged()
{
	int height = 0;
	for (int i = 0; i < m_nodeWidgetList.count(); i++)
	{
		height += m_nodeWidgetList[i]->height();
	}
	m_sensorBackWidget->setFixedHeight(height);
}

// 刷新数据;
void CustomTreeWidget::onUpdateData()
{
	if (m_refreshIndex >= m_nodeDataList.count())
	{
		m_refreshIndex = 0;
	}
	
	// 这里500ms更新一个节点的数据;
	SencorListWidget* sencorListWidget = m_nodeWidgetList[m_refreshIndex];
	NodeDataStruct nodeData = m_nodeDataList[m_refreshIndex];
	nodeData.numberColor = QColor(rand() % 256, rand() % 256, rand() % 256);
	sencorListWidget->setTitleInfo(nodeData.strNodeName, nodeData.strNodeCount, nodeData.numberColor);

	for (int j = 0; j < 6; j++)
	{
		SensorDataStruct sensorData = nodeData.sensorDataList[j];
		sensorData.alarmColor = nodeData.numberColor = QColor(rand() % 256, rand() % 256, rand() % 256);
		sencorListWidget->updateSensorItem(j, sensorData.alarmColor, sensorData.sensorName, sensorData.sensorNumber);
	}	

	m_refreshIndex++;
}
详细工程代码可以加群进行下载哦，群号：311750285，更多好玩，有趣的在等着你哦！！！
前行中的小猪
关注
专栏目录
订阅专栏
【QT开发】树形控件项QTreeWidgetItem类详解及实战应用
科技改变人类，技术成就未来
07-07 1943
QTreeWidgetItem是Qt提供的一个功能强大且灵活的树形控件项类，通过本篇文章的学习，你应该对QTreeWidgetItem有了全面的理解，能够在自己的项目中正确使用它。QTreeWidgetItem在用户界面中帮助你更好地展示和管理树状数据，实现交互式和响应式的数据展示，有助于创建用户友好和高效的文件系统浏览器、项目管理工具、目录树等应用场景。
QT绘制树状图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
07-28 650
QT绘制树状图（附完整源码）
qtdesigner使用树形控件实现堆叠布局
fresh_nam的博客
08-16 3091
qtdesigner使用树形控件实现堆叠布局
QT实现自定义侧边导航栏
最新发布
u012959478的博客
08-14 1646
侧边导航栏是网页或应用程序界面的一种常见布局，它通常位于页面或应用程序的侧边位置，用来展示导航菜单或功能链接，方便用户快速访问不同的页面或功能。在Qt中，可以通过继承QWidget类来实现自定义侧边导航栏。在paintEvent()函数中绘制自定义的导航栏样式。可以使用QPainter类的绘图功能来实现。为了实现与用户的交互，可以重写鼠标事件的处理函数，例如mouseMoveEvent()和mousePressEvent()。
C++ Qt开发：TreeWidget 树形选择组件
CSDN
12-18 8773
Qt 是一个跨平台C++图形界面开发库，利用Qt可以快速开发跨平台窗体应用程序，在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置，实现图形化开发极大的方便了开发效率，本章将重点介绍`TreeWidget`树形选择组件的常用方法及灵活运用。
QT 树形图带右键 鼠标点击过滤
07-13
qt 树形图 treeviewer 鼠标点击过滤
Qt树形控件QTreeView使用1——节点的添加删除操作 复选框的设置
热门推荐
huyisu的专栏
06-18 3万+
QtreeView是ui中最常用的控件，Qt中QTreeWidget比QTreeView更简单，但没有QTreeView那么灵活（QTreeWidget封装的和MFC的CTreeCtrl很类似，没有mvc的特点）。 1. QStandardItemModel在QTreeView中的使用 使用QTreeView的对应模型是QStandardItemModel，这个是Qt对应ui界面最有用
QT绘制树状图，支持拖拽，编辑文件
04-02
QT绘制树状图，根据示例代码diagramscene修改，支持拖拽，编辑文字，修改背景颜色，字体大小和颜色，方框放大缩小，箭头连线等功能
QT之树形结构显示说明
猴子居士的博客
01-14 5997
一、Qt中QTreeView往往不是单一的树形结构，而是复杂的多级结构。现在以一个复杂的树形数据结构为例，说明QTreeView是怎么显示的。 二、数据结构如图所示： （1）虚线1号表示无效的根节点。 （2）每个节点都有编号。 三、QTreeView中的显示。在同一列中的节点，如果不是同一级（有父子关系）则呈树状显示。 四、规律： （1）一个节点与所有直系column为0的子孙
qt自定义树形控件之一（控件的自定义）
千人斩的博客
01-17 1万+
前言 qt中定义了很多简单实用的数据展示视图控件，比如表格和树形表等。由于表格的结构和数据库存储类似，所以qt提供一个类来实现表格视图和数据库的直接连接。但是对于树形结构，在数据库中的表达和视图的表达有较大差异，qt尚未提供相关的功能。 本文的背景是要做一个模板的管理功能。由于模板的组织方式是层级结构（树形结构），所以要用到树形控件。又要求具有持久化保存模板的功能，将来还可能扩展的远程的模板统一管...
Ｑｔ实现自定义树状导航栏
12-07
"QT实现自定义树状导航栏"这个项目就是针对这一需求，通过QT的模型视图委托机制来创建一个可定制的、功能丰富的导航结构。让我们深入探讨一下其中涉及的关键知识点。 首先，我们需要了解QT中的模型视图架构。这是一...
Qt/C++编写自定义控件46-树状导航栏
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
08-09 4961
一、前言 树状导航栏控件是所有控件中最牛逼最经典最厉害的一个，在很多购买者中，使用频率也是最高，因为该导航控件集合了非常多的展示效果，比如左侧图标+右侧箭头+元素前面的图标设置+各种颜色设置等，全部涵盖了，代码量也比较多，该控件前后完善了三年，还提供了角标展示文字信息，纵观市面上web也好，cs架构的程序也好，这种导航条使用非常多，目前只提供了二级菜单，如果需要三级菜单需要自行更改源码才行。 二、...
QWidget 自定义model/view/delegate实现树形控件
cs821984831的博客
12-12 348
下面手把手教你写，如果看完本篇文章还不会，那我也拯救不了你了。1.定义自己的数据结构。在实现树形控件之前，你必须要定义自己的数据。model/view/delegate这个结构主要就是要分离你的数据和界面的操作。看下面这个数据结构，必须要定义的字段就是父对象和子容器。你想象一下树形节点要确定自己的位置，是不是必须知道我在哪个节点下面。假设我能展开，我是不是要知道我下面有多少子节点？// 父节点// 节点名称// 节点测试数据// 是否展开节点// 子节点容器else。
Qt-QTreeView自定义树控件
nixiaoxianggong的博客
01-18 3889
Qt-QTreeView自定义树控件 在做中大型项目时，可能又成百上千个功能界面，而这些功能界面无非就是数据的输入与输出，那么对常用的控件进行定制是非常重要的。本人认为Qt的原生控件使用起来有以下几点问题： 1、 Qt控件为了兼容各种情况，设计得是比较抽象的，对于新员工来说理解起来比较困难，接口调用也复杂； 2、 不同的人对代码理解不同，Qt的控件用起来也是各显神通，后期维护起来非常困难； 3、 ...
详解Qt中实现树状结构图
简介
04-22 1431
编译并运行上述代码，您将看到一个简单的树状结构图，包含一个根节点“Root”，以及两个子节点“Child 1”和“Child 2”。您可以根据实际需求扩展此示例，添加更多层级、自定义节点数据、处理用户交互等。这两个组件都允许我们创建具有层次结构的列表，但它们之间存在一些差异。
QT实现树形结构
qq_34546805的博客
09-02 3076
【代码】QT实现树形结构。
Qt实现表格树控件-自绘树节点虚线
hw5230的博客
12-24 2177
对于有一定开发经验的同学可能直接会去百度，或者上Qt帮助文档上查找资料，然后发现直接设置qss就能达到我们需要的效果，于是一顿操作后，发现效果还是不错滴。中已经说了，我们的表格控件是使用QTableView+QTreeView来实现的，那么我们操作树控件时必然要对表格中的表头进行同步操作了。表格中前3个函数就是绘制树控件的具体方法，这3个函数搭配起来完成了树控件内容格子的绘制。这充分说明产品的脑子是什么东西都能想出来的。树控件本身是不具有垂直分割线的，既然我们要模拟表格的样式，那么垂直分割线必然是需要的。
qt 实现画树功能
chen136258的专栏
09-13 3827
先上图片  贴上主要的代码 // 设置画笔颜色、宽度 painter->setPen(QPen(QColor(0, 160, 230), 2)); int widthRight = width() - padding_right; //画图的最右边 int heightTop = padding_top; //画图的最上面
qt 实现自定义树状导航栏
04-30
Qt是一个开源的跨平台应用程序框架，可以用于创建图形化界面和嵌入式系统。Qt的界面部分采用C++语言编写，可以使用Qt Creator等开发工具开发。在Qt中，可以使用QTreeView和QStandardItemModel类来实现自定义树状导航栏。 首先，创建一个新的Qt项目并在主窗口中添加一个QTreeView控件。然后创建一个QStandardItemModel实例，并将其设置为QTreeView的模型。接下来，可以使用QStandardItem类来创建树状结构的项，并将它们添加到QStandardItemModel中。 在创建树状结构时，需要注意每个项的父子关系和内容。可以使用QStandardItem类的setText()方法设置项的文本内容，setChild()方法设置子项，parent()方法设置父项。可以根据需要添加QStandardItem类的其他属性，如图标、颜色等。 最后，在主窗口中重新定义QTreeView的显示方式，以显示自定义的树状导航栏。可使用setRootIsDecorated()方法和setIndentation()方法来定义树形图形的显示方式和缩进。还可以使用setColumnWidth()方法来设置列宽，使显示更加美观。 总之，通过组合QTreeView、QStandardItemModel和QStandardItem类，可以在Qt中轻松实现自定义树状导航栏。这种自定义导航栏可以方便地将信息进行分层展示，提高用户的体验。了解Qt框架的使用，有助于开发高效、美观、稳定的跨平台应用程序。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值