Qt实现一个卡片橱窗

简介: Qt实现一个卡片橱窗

使用Qt中的QGridLayout布局实现一个卡片橱窗,先来看下效果图:

整体效果如上。这里图片素材来自:

https://www.iconfont.cn/illustrations/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=39081 
https://www.iconfont.cn/collections/detail?spm=a313x.7781069.1998910419.dc64b3430&cid=38624

非常感谢!

该小程序事实上就是QGridLayout的应用,值得一提的是,当只有一个卡片时,卡片也可以位于左上角:

卡片较多时可以使用滚动条滚动:

来看一下ui文件,这一切便一目了然:

首先卡片是一个单独的prizecards(widget),gridlayout布局和一个水平的弹簧被放置在一个widget中,这个widget被垂直的弹簧弹起,整体位于scrollAreaWidgetContents中。ok了,就是这样,水平和垂直的弹簧用来挤压gridlayout,这样当只有一个卡片时,卡片也能位于左上角的位置,而不至于在gridlayout布局的中间。

好像就是这样,哦,对了,当窗体size改变时,卡片大小会根据窗体大小重新计算,而这只需要我们提前把卡片放入一个set,当窗体size改变时,遍历set中的元素,并重新设置大小即可。

就像这样:

void PrizeWindow::resizeEvent(QResizeEvent *pEvent)
{
    //根据当前窗口大小计算每个卡片的大小
    int width = ui->scrollArea->size().width() / COLNUM - 7;
    int height = ui->scrollArea->size().height() / ROWNUM - 13;
    //遍历set,设置卡片大小
    for (auto s : m_setWidget) {
        s->setFixedSize(width, height);
    }
    QWidget::resizeEvent(pEvent);
}

程序源代码(包含可执行程序):

源代码地址

欢迎下载试玩!

相关文章
|
9月前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
647 0
06 QT - 按钮创建
06 QT - 按钮创建
65 0
超详细且简单的Qt Designer设置界面背景图
超详细且简单的Qt Designer设置界面背景图
超详细且简单的Qt Designer设置界面背景图
|
8月前
Qt之按钮操作
Qt之按钮操作
|
9月前
|
XML 缓存 C++
【Qt 控件】Qt 控件提升指南:从基础到高级应用
【Qt 控件】Qt 控件提升指南:从基础到高级应用
1053 1
|
9月前
|
开发框架 UED 开发者
QML(Qt Quick) 按钮设计指南
QML(Qt Quick) 按钮设计指南
619 0
从零开始学Pyqt5之【控件介绍】(12):QInputDialog对话框控件
从零开始学Pyqt5之【控件介绍】(12):QInputDialog对话框控件
从零开始学Pyqt5之【控件介绍】(12):QInputDialog对话框控件
从零开始学Pyqt5之【控件介绍】(10):QDialog对话框控件
从零开始学Pyqt5之【控件介绍】(10):QDialog对话框控件
从零开始学Pyqt5之【控件介绍】(10):QDialog对话框控件

热门文章

最新文章