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

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

源代码地址

欢迎下载试玩!

相关文章
|
JavaScript 前端开发 Linux
QCefView初步使用
QCefView初步使用
1150 0
|
算法 Linux API
【Qt 延迟手段】Qt中实现延迟和休眠的多种方法
【Qt 延迟手段】Qt中实现延迟和休眠的多种方法
2953 0
|
计算机视觉 Windows
Qt实用技巧:实现窗口透明的五种方法
Qt实用技巧:实现窗口透明的五种方法
Qt实用技巧:实现窗口透明的五种方法
|
UED
Qt侧边栏的动态展示:隐藏与呈现技术详解
在现代用户界面设计中,侧边栏(Sidebar)是一个常见的组件,它为用户提供了便捷的导航和操作入口。在Qt框架中,实现侧边栏的隐藏与呈现不仅能够提升应用的美观度,还能增强用户体验。本文将详细介绍如何在Qt中实现侧边栏的动态隐藏与呈现,包括技术要点和代码实现。
1369 0
|
编译器 C++
使用Visual Studio 2022 创建lib和dll并使用
本文介绍了如何在Visual Studio 2022中创建静态库(lib)和动态库(dll),并展示了如何使用这些库。文章详细说明了创建新项目、编写代码、生成库文件、配置项目属性以及编写测试代码的步骤,并提供了相应的截图和代码示例。作者还分享了在创建和使用库的过程中遇到的一些问题及其解决方案。
4164 0
使用Visual Studio 2022 创建lib和dll并使用
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 空白项Spacer
838 2
|
容器
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
【Qt 学习笔记】Qt常用控件 | 容器类控件 | Group Box的使用及说明
1557 3
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
3062 2
|
XML 设计模式 JSON
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解-1
QT 项目视图(QListView&QTreeView&QTableView)和项目部件(QListWidget&QTreeWidget&QTableWidget)详解
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Progress Bar的使用及说明
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Progress Bar的使用及说明
2648 0