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

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

源代码地址

欢迎下载试玩!

相关文章
|
消息中间件 物联网
MQTT常见问题之mqtt 报 MqttException:客户机未连接如何解决
MQTT(Message Queuing Telemetry Transport)是一个轻量级的、基于发布/订阅模式的消息协议,广泛用于物联网(IoT)中设备间的通信。以下是MQTT使用过程中可能遇到的一些常见问题及其答案的汇总:
QT资源文件-QFile Write/WriteOnly/ReadWrite打开失败说明
在使用QT进行开发过程中,常常会使用qrc(资源文件),比如一些配置文件,图片,图标(icon)等,但是一些没有经验的小伙伴会想着将配置文件的数据进行修改,发现无法以代码的方式对资源文件进行修改。
926 0
|
计算机视觉 Windows
Qt实用技巧:实现窗口透明的五种方法
Qt实用技巧:实现窗口透明的五种方法
Qt实用技巧:实现窗口透明的五种方法
|
8月前
|
机器学习/深度学习 人工智能 编解码
专用蚊子苍蝇检测数据集(含背景样本):适用于目标检测任务
本数据集专为蚊子、苍蝇目标检测打造,含1500张图片(蚊子、苍蝇各600+,背景200+),标注规范,采用YOLO格式,适配YOLOv8等模型。涵盖真实场景干扰,提升模型泛化能力,适用于智能家居、公共卫生、工业防控及AI教学科研,助力高效精准虫害识别系统开发。
专用蚊子苍蝇检测数据集(含背景样本):适用于目标检测任务
|
编解码 数据安全/隐私保护 Python
抖音批量发布作品视频工具, 自媒体批量发布工具,抖音自动上传发布视频软件
这个抖音批量上传工具包含以下功能模块:配置文件(config.py):集中管理账号、视频和上传配置视频处理模块(video_processor.py)
|
人工智能 运维 监控
自动化运维:从脚本到工具的演变之路
【10月更文挑战第8天】在数字化时代的浪潮中,运维不再是简单的硬件维护,它已经演变成一场关于效率、稳定性和创新的技术革命。本文将带您领略自动化运维的魅力,从最初的脚本编写到现代复杂的自动化工具,我们将一探究竟,看看这些工具如何帮助运维人员简化日常任务,提升工作效率,并最终推动业务发展。
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
【Qt 学习笔记】Qt常用控件 | 布局管理器 | 网格布局Grid Layout
3865 2
|
UED
Qt侧边栏的动态展示:隐藏与呈现技术详解
在现代用户界面设计中,侧边栏(Sidebar)是一个常见的组件,它为用户提供了便捷的导航和操作入口。在Qt框架中,实现侧边栏的隐藏与呈现不仅能够提升应用的美观度,还能增强用户体验。本文将详细介绍如何在Qt中实现侧边栏的动态隐藏与呈现,包括技术要点和代码实现。
1793 0
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Calendar Widget的使用及说明
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Calendar Widget的使用及说明
1298 0
|
Windows
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明
【Qt 学习笔记】Qt常用控件 | 显示类控件 | Label的使用及说明
2262 0