前一篇文章的简化版本只有浏览功能,前一篇文章链接如下:
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类实现示例参考上一篇文章。