Qt实现类似淘宝商品看板的界面，带有循环翻页以及点击某页跳转的功能

news2024/9/26 17:04:54

 效果如下：

#ifndef ModelDashboardGroup_h__
#define ModelDashboardGroup_h__

#include <QGridLayout>
#include <QLabel>
#include <QPushButton>
#include <QWidget>

#include <QLabel>
#include <QWidget>
#include <QMouseEvent>

class ClickableLabel : public QLabel {
	Q_OBJECT

public:
	explicit ClickableLabel(QWidget* parent = nullptr) : QLabel(parent) {}

signals:
	void clicked();

protected:
	void mousePressEvent(QMouseEvent* event) override
	{
		if (event->button() == Qt::LeftButton) {
			emit clicked();
		}
		QLabel::mousePressEvent(event);
	}
};

QT_BEGIN_NAMESPACE
namespace Ui { class CModelDashboardGroup; };
QT_END_NAMESPACE

class CModelDashboardGroup : public QWidget
{
	Q_OBJECT

public:
	CModelDashboardGroup(QWidget *parent = nullptr);
	~CModelDashboardGroup();

	void SetItemWidgetInfos(const std::vector<std::pair<QString, QString> >& vecItemWidgetInfo);

	void AddItemWidgetInfo(const QString& strModelName, const QString& strModelImagePath);

	// 设置每页展示的模型图片数量
	void SetPerPageItemsNumber(int nNumber);

	// 设置展示页数的Label数量
	void SetMaxPageLabelCount(int nMaxPages);

	// 设置每行展示的模型图片的数量
	void SetPerColItemsNumber(int nNumber);

private:

	void Init();

	void AddItemToGrid(int nIndex);

	void UpdateGrid();

	void UpdatePageLabels();

	int CalculateStartPage() const;

private slots:

	void SlotPageButtonClicked();

	void SlotPageLabelClicked(int nIndex);

private:
	Ui::CModelDashboardGroup *ui;

	std::vector<std::pair<QString, QString> > m_vecItemWidgetInfo;// 第一个QString表示模型名称，第二个QString表示模型展示图片路径

	QGridLayout* m_pGridLayout;

	QHBoxLayout* m_pPageControlLayout;
	QPushButton* m_pPrevButton;
	QPushButton* m_pNextButton;
	QList<ClickableLabel*> m_listPageLabels;

	int m_nCurrentPage;
	int m_nPerPageItemsNumber;
	int m_nPerRowPageItemsNumber;
	int m_nTotalPages;
	int m_nMaxPageLabels;
};

#endif // ModelDashboardGroup_h__
#include "ui_ModelDashboardGroup.h"

#include "ModelDashboardGroup.h"
#include "ModelDashboard.h"
#include <QGraphicsOpacityEffect>

CModelDashboardGroup::CModelDashboardGroup(QWidget *parent)
	: QWidget(parent)
	, ui(new Ui::CModelDashboardGroup())
	, m_pGridLayout(NULL)
	, m_pPrevButton(NULL)
	, m_pNextButton(NULL)
	, m_nCurrentPage(0)
	, m_nPerPageItemsNumber(10)
	, m_nPerRowPageItemsNumber(5)
	, m_nTotalPages(1)
	, m_nMaxPageLabels(5)
{
	ui->setupUi(this);

	//setWindowFlags(Qt::Dialog | Qt::FramelessWindowHint);//去掉标题栏
	setAttribute(Qt::WA_TranslucentBackground, true);//设置窗口背景透明

	Init();

	// 测试数据
	if (1)
	{
		std::vector<std::pair<QString, QString> > vecItemWidgetInfo;
		for (int i = 1; i <= 105; ++i)
		{  
			// 增加商品数量以测试分页
			vecItemWidgetInfo.push_back(std::make_pair(QString::fromLocal8Bit("模型%1").arg(i), QString::fromLocal8Bit(":/dotnetIcon.png")));
		}

		SetItemWidgetInfos(vecItemWidgetInfo);
	}
	else
	{
		UpdatePageLabels();
		UpdateGrid();
	}
}

CModelDashboardGroup::~CModelDashboardGroup()
{
	delete ui;
}

void CModelDashboardGroup::SetItemWidgetInfos(const std::vector<std::pair<QString, QString>>& vecItemWidgetInfo)
{
	m_vecItemWidgetInfo.clear();
	m_vecItemWidgetInfo = vecItemWidgetInfo;

	m_nTotalPages = (m_nPerPageItemsNumber + static_cast<int>(m_vecItemWidgetInfo.size()) - 1) / m_nPerPageItemsNumber;
	UpdatePageLabels();
	UpdateGrid();
}

void CModelDashboardGroup::AddItemWidgetInfo(const QString& strModelName, const QString& strModelImagePath)
{
	m_vecItemWidgetInfo.push_back(std::make_pair(strModelName, strModelImagePath));

	m_nTotalPages = (m_nPerPageItemsNumber + static_cast<int>(m_vecItemWidgetInfo.size()) - 1) / m_nPerPageItemsNumber;
	UpdatePageLabels();
	UpdateGrid();
}

void CModelDashboardGroup::SetPerPageItemsNumber(int nNumber)
{
	m_nPerPageItemsNumber = nNumber;
}

void CModelDashboardGroup::SetMaxPageLabelCount(int nMaxPages)
{
	m_nMaxPageLabels = nMaxPages;
}

void CModelDashboardGroup::SetPerColItemsNumber(int nNumber)
{
	m_nPerRowPageItemsNumber = nNumber;
}

void CModelDashboardGroup::Init()
{
	QVBoxLayout* pMainLayout = new QVBoxLayout(this);

	QWidget* pGridWidget = new QWidget(this);
	m_pGridLayout = new QGridLayout(pGridWidget);
	m_pGridLayout->setSpacing(10);

	m_pPageControlLayout = new QHBoxLayout();
	m_pPrevButton = new QPushButton(QString::fromLocal8Bit("上一页"));
	m_pPrevButton->setFixedSize(QSize(75, 37));
	m_pPrevButton->setCursor(Qt::PointingHandCursor);
	m_pPrevButton->setStyleSheet("QPushButton {"
		"width: 75px;"
		"height: 37px;"
		"background-color: #0097ee;"
		"border-radius: 5px;"
		"color: white;"
		"font-size:10pt;"
		"font-weight: bold;"
		"font-family: Microsoft YaHei;"
		"padding-bottom:2px;"
		"}");
	m_pNextButton = new QPushButton(QString::fromLocal8Bit("下一页"));
	m_pNextButton->setFixedSize(QSize(75, 37));
	m_pNextButton->setCursor(Qt::PointingHandCursor);
	m_pNextButton->setStyleSheet("QPushButton {"
		"width: 75px;"
		"height: 37px;"
		"background-color: #0097ee;"
		"border-radius: 5px;"
		"color: white;"
		"font-size:10pt;"
		"font-weight: bold;"
		"font-family: Microsoft YaHei;"
		"padding-bottom:2px;"
		"}");
	//QLabel* pPageLabel = new QLabel("1");

	connect(m_pPrevButton, &QPushButton::clicked, this, &CModelDashboardGroup::SlotPageButtonClicked);
	connect(m_pNextButton, &QPushButton::clicked, this, &CModelDashboardGroup::SlotPageButtonClicked);

	m_pPageControlLayout->addSpacerItem(new QSpacerItem(20, 20, QSizePolicy::Expanding, QSizePolicy::Minimum));
	m_pPageControlLayout->addWidget(m_pPrevButton);
	m_pPageControlLayout->addWidget(m_pNextButton);
	m_pPageControlLayout->addSpacerItem(new QSpacerItem(20, 20, QSizePolicy::Expanding, QSizePolicy::Minimum));

	pMainLayout->addWidget(pGridWidget);
	pMainLayout->addLayout(m_pPageControlLayout);
}

void CModelDashboardGroup::AddItemToGrid(int nIndex)
{
	CModelDashboard* pModelDashboard = new CModelDashboard();// 自定义widget替换为自己的类

	if (nIndex >= 0 && nIndex < m_vecItemWidgetInfo.size())
	{
		pModelDashboard->SetModelDisPlayName(m_vecItemWidgetInfo[nIndex].first);
		pModelDashboard->SetModelDisPlayImage(m_vecItemWidgetInfo[nIndex].second);
	}
	else
	{
		// 添加示例商品
		pModelDashboard->SetModelDisPlayName(QString::fromLocal8Bit("模型"));
		pModelDashboard->SetModelDisPlayImage(QString::fromLocal8Bit(":/dotnetIcon.png"));
	}

	int nRow = (m_pGridLayout->count() / m_nPerRowPageItemsNumber);  // 计算行数
	int nCol = (m_pGridLayout->count() % m_nPerRowPageItemsNumber);  // 计算列数
	m_pGridLayout->addWidget(pModelDashboard, nRow, nCol);
}

void CModelDashboardGroup::UpdateGrid()
{
	// 清空现有网格布局
	QLayoutItem* pItem;
	while ((pItem = m_pGridLayout->takeAt(0)) != NULL)
	{
		delete pItem->widget();
		delete pItem;
	}

	int nStartIndex = m_nCurrentPage * m_nPerPageItemsNumber;
	int nEndIndex = qMin(nStartIndex + m_nPerPageItemsNumber, static_cast<int>(m_vecItemWidgetInfo.size()));

	// 添加实际模型
	for (int i = nStartIndex; i < nEndIndex; ++i)
	{
		AddItemToGrid(i);
	}

	// 如果最后一页商品不足一页，则添加示例
	int nNumPlaceholders = m_nPerPageItemsNumber - (nEndIndex - nStartIndex);
	for (int i = 0; i < nNumPlaceholders; ++i)
	{
		AddItemToGrid(-1);  // 使用负索引来添加示例
	}

	UpdatePageLabels();
	m_pPrevButton->setEnabled(m_nTotalPages > 1); // Enable/disable based on totalPages
	m_pNextButton->setEnabled(m_nTotalPages > 1); // Enable/disable based on totalPages
}

void CModelDashboardGroup::UpdatePageLabels()
{
	// 清除现有的页码标签
	for (int i = 0; i < m_listPageLabels.size(); i++)
	{
		ClickableLabel* pClickableLabel = m_listPageLabels.at(i);
		if (NULL != pClickableLabel)
		{
			m_pPageControlLayout->removeWidget(pClickableLabel);
			pClickableLabel->deleteLater();
		}
	}
	m_listPageLabels.clear();

	// 在 items 为空时至少显示一个页码标签
	int nNumLabels = qMax(1, qMin(m_nTotalPages, m_nMaxPageLabels));
	int nStartPage = CalculateStartPage();

	for (int i = 0; i < nNumLabels; ++i)
	{
		ClickableLabel* pLabel = new ClickableLabel();
		pLabel->setAlignment(Qt::AlignCenter);
		pLabel->setStyleSheet("QLabel {"
			"width: 37px;"
			"height: 37px;"
			"background-color: #293d70;"
			"border-radius: 5px;"
			"color: white;"
			"font-size:10pt;"
			"font-weight: bold;"
			"font-family: Microsoft YaHei;"
			"padding-bottom:2px;"
			"}");
		//QGraphicsOpacityEffect *opacityEffect = new QGraphicsOpacityEffect;
		//opacityEffect->setOpacity(0.4);
		//pLabel->setGraphicsEffect(opacityEffect);
		pLabel->setFixedSize(QSize(37, 37));
		pLabel->setText(QString::number(nStartPage + i + 1));
		pLabel->setCursor(Qt::PointingHandCursor);
		m_listPageLabels.append(pLabel);
		m_pPageControlLayout->insertWidget(m_pPageControlLayout->count() - 2, pLabel); // 插入在按钮之前

		connect(pLabel, &ClickableLabel::clicked, this, [this, i]()
		{
			SlotPageLabelClicked(i);
		});

		if (nStartPage + i == m_nCurrentPage)
		{
			pLabel->setStyleSheet("QLabel {"
				"width: 37px;"
				"height: 37px;"
				"background-color: #0097ee;"
				"border-radius: 5px;"
				"color: white;"
				"font-size:10pt;"
				"font-weight: bold;"
				"font-family: Microsoft YaHei;"
				"padding-bottom:2px;"
				"}");
		}
	}
}

int CModelDashboardGroup::CalculateStartPage() const
{
	if (m_nTotalPages <= m_nMaxPageLabels)
	{
		return 0;
	}
	if (m_nCurrentPage <= m_nMaxPageLabels / 2)
	{
		return 0;
	}
	if (m_nCurrentPage >= m_nTotalPages - (m_nMaxPageLabels / 2))
	{
		return m_nTotalPages - m_nMaxPageLabels;
	}
	return m_nCurrentPage - (m_nMaxPageLabels / 2);
}

void CModelDashboardGroup::SlotPageButtonClicked()
{
	QPushButton* pPushButton = qobject_cast<QPushButton*>(sender());
	if (pPushButton == m_pPrevButton)
	{
		// 循环到最后一页
		m_nCurrentPage = (m_nCurrentPage > 0) ? (m_nCurrentPage - 1) : (m_nTotalPages - 1);
	}
	else if (pPushButton == m_pNextButton)
	{
		// 循环到第一页
		m_nCurrentPage = (m_nCurrentPage < m_nTotalPages - 1) ? (m_nCurrentPage + 1) : 0;
	}
	UpdatePageLabels();
	UpdateGrid();
}

void CModelDashboardGroup::SlotPageLabelClicked(int nIndex)
{
	int nStartPage = CalculateStartPage();
	int nNewPage = nStartPage + nIndex;
	if (nNewPage >= 0 && nNewPage < m_nTotalPages)
	{
		m_nCurrentPage = nNewPage;
		UpdatePageLabels();
		UpdateGrid();
	}
}

修改AddItemToGrid接口中的CModelDashboard类即可，修改为自己需要展示的widget。

以下为一个示例：

 

#pragma once

#include <QWidget>
#include "ui_ModelDashboard.h"

QT_BEGIN_NAMESPACE
namespace Ui { class CModelDashboard; };
QT_END_NAMESPACE

class CModelDashboard : public QWidget
{
	Q_OBJECT

public:
	CModelDashboard(QWidget *parent = nullptr);
	~CModelDashboard();

	void SetModelDisPlayImage(const QString& strImagePath);

	void SetModelDisPlayName(const QString& strText);

private:
	Ui::CModelDashboard *ui;
};

#include "ModelDashboard.h"

CModelDashboard::CModelDashboard(QWidget *parent)
	: QWidget(parent)
	, ui(new Ui::CModelDashboard())
{
	ui->setupUi(this);
}

CModelDashboard::~CModelDashboard()
{
	delete ui;
}

void CModelDashboard::SetModelDisPlayImage(const QString& strImagePath)
{
	QPixmap pixmap(strImagePath);
	ui->labelImage->setPixmap(pixmap);
}

void CModelDashboard::SetModelDisPlayName(const QString& strText)
{
	ui->labelText->setText(strText);
}

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

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

相关文章

Jenkins保姆笔记（3）——Jenkins拉取Git代码、编译、打包、远程多服务器部署Spring Boot项目

Jenkins保姆笔记（3）——Jenkins拉取Git代码、编译、打包、远程多服务器部署Spring Boot项目

前面我们介绍过&#xff1a; Jenkins保姆笔记&#xff08;1&#xff09;——基于Java8的Jenkins安装部署 Jenkins保姆笔记&#xff08;2&#xff09;——基于Java8的Jenkins插件安装 本篇主要介绍基于Java8的Jenkins第一个Hello World项目&#xff0c;一起实践下Jenkins拉…
阅读更多...
第十九节 大语言模型与多模态大模型loss计算

第十九节 大语言模型与多模态大模型loss计算

文章目录 前言一、大语言模型loss计算1、loss计算代码解读2、构建模型输入内容与label标签二、多模态大模型loss计算方法1、多模态loss计算代码解读2、多模态输入内容2、大语言模型输入内容3、图像embending如何嵌入文本embeding前言 如果看了我前面文章，想必你基本对整个代码…
阅读更多...
Java学习Day24：基础篇14：多线程

Java学习Day24：基础篇14：多线程

1.程序、进程和线程 程序 进程 进程(process)是程序的一次执行过程&#xff0c;或是一个正在执行的程序。是一个动态的过程&#xff1a;有它自身的产 生、存在和消亡的过程。 如&#xff1a; 运行中的QQ运行中的音乐播放器视频播放器等&#xff1b;程序是静态的&#xff0c…
阅读更多...
写给小白程序员的一封信

写给小白程序员的一封信

文章目录 1.编程小白如何成为大神&#xff1f;大学新生的最佳入门攻略2.程序员的练级攻略3.编程语言的选择4.熟悉Linux5.学会git6.知道在哪寻求帮助7.多结交朋友8.参加开源项目9.坚持下去 1.编程小白如何成为大神&#xff1f;大学新生的最佳入门攻略 编程已成为当代大学生的必…
阅读更多...
音视频开发，最新学习心得与感悟

音视频开发，最新学习心得与感悟

音视频技术的知识海洋浩瀚无垠&#xff0c;自学之路显得尤为崎岖&#xff0c;技术门槛的存在是毋庸置疑的事实。 对于渴望踏入这一行业的初学者而言&#xff0c;学习资源的匮乏成为了一道难以逾越的障碍。 本次文章主要是给大家分享音视频开发进阶学习路线&#xff0c;虽然我…
阅读更多...
三大口诀不一样的代码，小小的制表符和换行符玩的溜呀

三大口诀不一样的代码，小小的制表符和换行符玩的溜呀

# 小案例&#xff0c;打印输出加法口诀 for i in range(1,10):for j in range(1,10):if j>i:breakprint(f"{j}{i}{ji}".strip(),end\t)print() print(\n) for i in range(1,10):for j in range(1,10):if j>i:breakprint(f"{j}x{i}{j*i}",end\t)print…
阅读更多...
[Spring] Spring AOP

[Spring] Spring AOP

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…
阅读更多...
【Linux】sudo提升权限（入门）

【Linux】sudo提升权限（入门）

相关专栏&#xff1a;《Linux》 目录 1. sudo功能介绍 2. 任何人都能用 sudo 吗&#xff1f; &#xff08;1&#xff09;查看配置文件/etc/sudoers &#xff08;2&#xff09;修改/etc/sudoers提权 3. 改变sudo输入密码时间 4. 显示sudo 密码 5.常见 sudo 命令 -k 参数 …
阅读更多...
ajax part4

ajax part4

图片上传 <!DOCTYPE html> <lang"en"><head>cmeta charset"UTF-8><meta http-equiv"X-UA-Compatibleb content" IEedge"><meta name"viewportR content" wiclthdevic6-widths initial-scalel. 0"&…
阅读更多...
做报表用什么工具？不想再用Excel了！！！

做报表用什么工具？不想再用Excel了！！！

一、什么是中国式报表&#xff1f; 不知道大家现在还是使用Excel来制作报表&#xff0c;然后跟领导汇报工作吗&#xff1f;虽然Excel功能很强大&#xff0c;但是用Excel做过中国式报表的小伙伴一定知道它的制作过程有多复杂。 中国式报表可以用一句话简单概括&#xff1a;格式…
阅读更多...
C++笔试强训11

C++笔试强训11

文章目录 一、选择题1-5题6-10题 二、编程题题目一题目二 一、选择题 1-5题 A. 不是任何一个函数都可定义成内联函数&#xff1a;这是正确的。因为内联函数需要在编译时展开&#xff0c;如果函数体过大或包含复杂的控制结构&#xff08;如循环、递归等&#xff09;&#xff0c…
阅读更多...
Linux/C 高级——分文件编程

Linux/C 高级——分文件编程

1.头文件&#xff1a;.h结尾的文件 头文件引用、宏定义、重命名typedef、结构体、共用体、枚举的定义、函数声明、外部引用extern。 一般全局变量不会定义在头文件中 2.源文件&#xff1a;.c结尾的文件 包含main函数的.c文件&#xff1a;main函数 包含子函数的.c文件&#xff1…
阅读更多...
【LLM】-17-会话存储

【LLM】-17-会话存储

目录 1、会话存储类型 2、版本代码说明 3、对话缓存存储 3.1、示例代码 3.2、响应response说明 3.3、流式输出 3.4、添加提示词模板 3.5、指定回答语言 4、限制令牌数存储 4.1、trim_messages 4.1.1、自定义tokens计数器 4.1.2、自定义tokens计数器 4.2、完整chat…
阅读更多...
HookNet- 用于病理全切片图像的多分辨率语义分割模型｜顶刊精析·24-08-08

HookNet- 用于病理全切片图像的多分辨率语义分割模型｜顶刊精析·24-08-08

小罗碎碎念 今天分享的这篇文章是关于一种名为HookNet的新型语义分割模型&#xff0c;它专为病理学全切片图像设计&#xff0c;于2021年发表于《Med Image Anal》&#xff0c;目前IF10.7。 作者角色姓名单位&#xff08;中文翻译&#xff09;第一作者Mart van Rijthoven荷兰Ra…
阅读更多...
Spring-boot 集成 SocketIO（看这一篇就够了）

Spring-boot 集成 SocketIO（看这一篇就够了）

1 前言 1.1 什么是 SocketIO ? Socket.IO 是一个可以在浏览器与服务器之间实现实时、双向、基于事件的通信的工具库。 Socket.IO 能够在任何平台、浏览器或设备上运行,可靠性和速度同样出色。 1.2 websocket和socket.io区别&#xff1f; websocket a&#xff1a;一种让客户…
阅读更多...
video标签，去除上下默认边距

video标签，去除上下默认边距

不知道为什么&#xff0c;video标签上下会有空白 清除方法 style"width 100%; height100%; object-fit: fill"
阅读更多...
校园二手物品交易网站/校园闲置物品交易系统

校园二手物品交易网站/校园闲置物品交易系统

摘 要 本文论述了校园二手物品交易网站的设计和实现&#xff0c;该网站从实际运用的角度出发&#xff0c;运用了计算机网站设计、数据库等相关知识&#xff0c;网络和JSP技术、SSM框架Mysql数据库设计来实现的&#xff0c;网站主要包括学生注册、学生登录、浏览商品、搜索商品…
阅读更多...
Vue+Element Plus后台管理主界面搭建实现

Vue+Element Plus后台管理主界面搭建实现

​ 续接Django REST Framework&#xff0c;使用Vite构建Vue3的前端项目 1. 后台管理系统主界面框架搭建 后台系统主界面搭建 新建后台管理文件目录 完成后台整体布局 // 1.主界面 index.vue<script setup lang"ts"></script><template><el-…
阅读更多...
应用层HTTP协议

应用层HTTP协议

文章目录 应用层HTTP协议1、HTTP协议概念2、URL&#xff08;统一资源定位符&#xff09;2.1、URL的encode&#xff08;编码&#xff09;和decode&#xff08;解码&#xff09; 3、HTTP请求和响应报头格式3.1、请求报头3.2、响应报头 4、HTTP的方法4.1、GET方法4.2、POST方法4.3…
阅读更多...
生成模型VAE

生成模型VAE

VAE likelihood-basedELBOVAESGVB估计器和AEVB算法重参数化 likelihood-based likelihood-based generative models是生成模型的一类范式&#xff0c;通过最大化所有观测数据的似然函数来学习模型参数。 该怎么去理解likelihood-based&#xff0c;基于似然的生成模型&#xf…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023