前一篇文章的简化版本只有浏览功能，前一篇文章链接如下：
Qt实现类似淘宝商品看板的界面，带有循环翻页以及点击某页跳转的功能
效果如下：
代码留给有需要的人。
#ifndef ModelDashboardGroup_h__
#define ModelDashboardGroup_h__#include <QGridLayout>
#include <QLabel>
#include <QWidget>
#include <QScrollArea>QT_BEGIN_NAMESPACE
namespace Ui { class CModelDashboardGroup; };
QT_END_NAMESPACEclass CModelDashboardGroup : public QWidget
{Q_OBJECTpublic: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__#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类实现示例参考上一篇文章。
