Qt实现类似淘宝商品展示看板功能简版

前一篇文章的简化版本只有浏览功能,前一篇文章链接如下:

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

效果如下:

代码留给有需要的人。

cpp 复制代码
#ifndef ModelDashboardGroup_h__
#define ModelDashboardGroup_h__

#include <QGridLayout>
#include <QLabel>
#include <QWidget>
#include <QScrollArea>

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 SetPerColItemsNumber(int nNumber);

private:
	void Init();
	void AddItemToGrid(int nIndex);
	void UpdateGrid();

private:
	Ui::CModelDashboardGroup *ui;

	std::vector<std::pair<QString, QString>> m_vecItemWidgetInfo; // 模型名称和展示图片路径

	QGridLayout* m_pGridLayout;
	QScrollArea* m_pScrollArea;

	int m_nPerRowPageItemsNumber;
};

#endif // ModelDashboardGroup_h__
cpp 复制代码
#include "ui_ModelDashboardGroup.h"
#include "ModelDashboardGroup.h"
#include "ModelDashboard.h"

CModelDashboardGroup::CModelDashboardGroup(QWidget *parent)
	: QWidget(parent)
	, ui(new Ui::CModelDashboardGroup())
	, m_pGridLayout(NULL)
	, m_nPerRowPageItemsNumber(5)
{
	ui->setupUi(this);
	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
	{
		UpdateGrid();
	}
}

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

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

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

void CModelDashboardGroup::SetPerColItemsNumber(int nNumber)
{
	m_nPerRowPageItemsNumber = nNumber;
	UpdateGrid(); // Update the grid layout when the number of columns is set or changed
}

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

	m_pScrollArea = new QScrollArea(this);
	m_pScrollArea->setWidgetResizable(true);
	m_pScrollArea->setVerticalScrollBarPolicy(Qt::ScrollBarAlwaysOff);
	m_pScrollArea->setHorizontalScrollBarPolicy(Qt::ScrollBarAlwaysOff);

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

	pGridWidget->setLayout(m_pGridLayout);
	m_pScrollArea->setWidget(pGridWidget);

	pMainLayout->addWidget(m_pScrollArea);
}

void CModelDashboardGroup::AddItemToGrid(int nIndex)
{
	CModelDashboard* pModelDashboard = new CModelDashboard();

	if (nIndex >= 0 && nIndex < m_vecItemWidgetInfo.size())
	{
		pModelDashboard->SetModelDisPlayName(m_vecItemWidgetInfo[nIndex].first);
		pModelDashboard->SetModelDisPlayImage(m_vecItemWidgetInfo[nIndex].second);
	}
	else
	{
		// 添加示例商品
		pModelDashboard->SetModelDisPlayName("模型");
		pModelDashboard->SetModelDisPlayImage(":/model03_normal.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 nTotalItems = m_vecItemWidgetInfo.size();

	for (int i = 0; i < nTotalItems; ++i)
	{
		AddItemToGrid(i);
	}
}

CModelDashboard类实现示例参考上一篇文章。

相关推荐
重生之我是数学王子1 分钟前
QT基础 编码问题 定时器 事件 绘图事件 keyPressEvent QT5.12.3环境 C++实现
开发语言·c++·qt
梅见十柒2 分钟前
wsl2中kali linux下的docker使用教程(教程总结)
linux·经验分享·docker·云原生
我们的五年25 分钟前
【Linux课程学习】:进程程序替换,execl,execv,execlp,execvp,execve,execle,execvpe函数
linux·c++·学习
做人不要太理性1 小时前
【C++】深入哈希表核心:从改造到封装,解锁 unordered_set 与 unordered_map 的终极奥义!
c++·哈希算法·散列表·unordered_map·unordered_set
程序员-King.1 小时前
2、桥接模式
c++·桥接模式
chnming19871 小时前
STL关联式容器之map
开发语言·c++
程序伍六七1 小时前
day16
开发语言·c++
管家婆客服中心1 小时前
提成制是什么?如何高效管理提成制?
经验分享·管家婆软件
小陈phd2 小时前
Vscode LinuxC++环境配置
linux·c++·vscode
火山口车神丶2 小时前
某车企ASW面试笔试题
c++·matlab