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);
}

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

源代码地址

欢迎下载试玩!

相关文章
|
19天前
|
算法 API C++
【Qt UI】QT 窗口/控件置顶方法详解
【Qt UI】QT 窗口/控件置顶方法详解
116 0
|
API 计算机视觉
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
Qt实用技巧:自定义窗口标题栏
超详细且简单的Qt Designer设置界面背景图
超详细且简单的Qt Designer设置界面背景图
超详细且简单的Qt Designer设置界面背景图
|
19天前
|
开发框架 UED 开发者
QML(Qt Quick) 按钮设计指南
QML(Qt Quick) 按钮设计指南
111 0
|
19天前
|
数据安全/隐私保护
Qt6学习笔记六(界面布局)
Qt6学习笔记六(界面布局)
43 0
|
12月前
|
C++
Vs+Qt 界面添加背景图的两种方式(非常实用)
Vs+Qt 界面添加背景图的两种方式(非常实用)
Qt-网易云音乐界面实现-5 收藏列表,播放列表实现 QListWidget QTableWidget
先上目前完成的内容吧,发现后面越写越多。在看看点击量,心凉凉。
321 0
Qt-网易云音乐界面实现-5 收藏列表,播放列表实现 QListWidget QTableWidget
|
C++
Qt界面优化:Qt窗体控件设置
Qt界面优化:Qt窗体控件设置
373 1
Qt界面优化:Qt窗体控件设置
|
Linux 计算机视觉 C++
Qt实用技巧:Qt窗口置顶
Qt实用技巧:Qt窗口置顶
|
前端开发 C++
qt 如何设计好布局和漂亮的界面。
qt 如何设计好布局和漂亮的界面。
qt 如何设计好布局和漂亮的界面。