使用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); }
程序源代码(包含可执行程序):
欢迎下载试玩!