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

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

源代码地址

欢迎下载试玩!

相关文章
|
7天前
|
人工智能 数据可视化 安全
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw,结合飞书CLI等工具,让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念:未来软件应为AI而生,CLI即AI的“手脚”,实现高效、安全、可控的智能自动化。
34455 17
王炸组合!阿里云 OpenClaw X 飞书 CLI,开启 Agent 基建狂潮!(附带免费使用6个月服务器)
|
18天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw:学生认证白嫖6个月阿里云服务器,手把手配置飞书机器人、接入免费/高性价比AI模型(NVIDIA/通义),并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿,5分钟完成热点→文章全流程!
45284 142
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
|
8天前
|
人工智能 JSON 监控
Claude Code 源码泄露:一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码,我发现自己错了。
4834 20
|
1天前
|
人工智能 自然语言处理 安全
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
本文介绍了Claude Code终端AI助手的使用指南,主要内容包括:1)常用命令如版本查看、项目启动和更新;2)三种工作模式切换及界面说明;3)核心功能指令速查表,包含初始化、压缩对话、清除历史等操作;4)详细解析了/init、/help、/clear、/compact、/memory等关键命令的使用场景和语法。文章通过丰富的界面截图和场景示例,帮助开发者快速掌握如何通过命令行和交互界面高效使用Claude Code进行项目开发,特别强调了CLAUDE.md文件作为项目知识库的核心作用。
1672 5
Claude Code 全攻略:命令大全 + 实战工作流(建议收藏)
|
7天前
|
人工智能 API 开发者
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到?最新解决方案
阿里云百炼Coding Plan Lite已停售,Pro版每日9:30限量抢购难度大。本文解析原因,并提供两大方案:①掌握技巧抢购Pro版;②直接使用百炼平台按量付费——新用户赠100万Tokens,支持Qwen3.5-Max等满血模型,灵活低成本。
1734 5
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到?最新解决方案