环保工程东莞网站建设广点通
效果如下:
1、首先我们要设置QListWidget的ViewMode为图片模式IconMode
2、然后确定每个item的大小,重写代理的sizeHint函数
QSize sizeHint(const QStyleOptionViewItem& option, const QModelIndex& index) const override{//假如整个QListWidget每行显示4个item,那么每个item的宽度就是整个QListWidget的宽度减去右边的间距(这里还多减了10px,一行才显示了4个,Qt Bug)//然后除以4,得到每个item的宽度//然后每个item以正方形为区域//返回每个item的尺寸//但是绘制的时候为了显示间距,在每个item的区域绘制时不绘制满,而是将矩形的左上角往内缩spacing的距离int width = (option.widget->width()-spacing-10) / 4;qDebug()<<"widget with:"<<option.widget->width();qDebug()<<"item with:"<<width;return QSize(width, width);}
3、然后重写代理的paint函数
void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const override{painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::TextAntialiasing);//每行4个 正方形//绘制区域:将item实际矩形区域的左上角往内缩spacing的距离QRect rect = option.rect.adjusted(spacing, spacing, 0, 0);//绘制图像painter->save();QPixmap pixmap = index.data(Qt::UserRole+1).value<QPixmap>();//得到item的图片数据QSize pixmapSize = pixmap.size();pixmapSize.scale(rect.size(), Qt::KeepAspectRatio);QRect scaledRect(QPoint(0, 0), pixmapSize);//得到图片等比例缩放的矩形scaledRect.moveTopLeft(rect.topLeft());//将图片缩放后的矩形移动到和绘制局域的左上角重合painter->drawPixmap(scaledRect.adjusted(2,2,-2,-2), pixmap);//整体往内缩2px,给边框留空间painter->restore();painter->save();if (option.state.testFlag(QStyle::State_Selected)){//选中,绘制轮廓线painter->setBrush(Qt::NoBrush);QPen pen;pen.setStyle(Qt::SolidLine);pen.setColor(QColor("#ff0000"));pen.setWidth(2);painter->setPen(pen);painter->drawRect(scaledRect);}painter->restore();}
完整代码如下:
#ifndef CUSTOMDELETEGATEFORLISTVIEW_H
#define CUSTOMDELETEGATEFORLISTVIEW_H#include <QStyledItemDelegate>
#include <QPainter>
#include<QDebug>class CustomDeletegateForListView :public QStyledItemDelegate
{Q_OBJECT
public:CustomDeletegateForListView(QObject* parent = nullptr):QStyledItemDelegate(parent){}~CustomDeletegateForListView() = default;protected://重写sizeHint函数,这个函数返回的尺寸决定了每个Item的矩形局域的大小QSize sizeHint(const QStyleOptionViewItem& option, const QModelIndex& index) const override{//假如整个QListWidget每行显示4个item,那么每个item的宽度就是整个QListWidget的宽度减去右边的间距(这里还多减了10px,一行才显示了4个,Qt Bug)//然后除以4,得到每个item的宽度//然后每个item以正方形为区域//返回每个item的尺寸//但是绘制的时候为了显示间距,在每个item的区域绘制时不绘制满,而是将矩形的左上角往内缩spacing的距离int width = (option.widget->width()-spacing-10) / 4;qDebug()<<"widget with:"<<option.widget->width();qDebug()<<"item with:"<<width;return QSize(width, width);}void paint(QPainter* painter, const QStyleOptionViewItem& option, const QModelIndex& index) const override{painter->setRenderHints(QPainter::Antialiasing | QPainter::SmoothPixmapTransform | QPainter::TextAntialiasing);//每行4个 正方形//绘制区域:将item实际矩形区域的左上角往内缩spacing的距离QRect rect = option.rect.adjusted(spacing, spacing, 0, 0);//绘制图像painter->save();QPixmap pixmap = index.data(Qt::UserRole+1).value<QPixmap>();//得到item的图片数据QSize pixmapSize = pixmap.size();pixmapSize.scale(rect.size(), Qt::KeepAspectRatio);QRect scaledRect(QPoint(0, 0), pixmapSize);//得到图片等比例缩放的矩形scaledRect.moveTopLeft(rect.topLeft());//将图片缩放后的矩形移动到和绘制局域的左上角重合painter->drawPixmap(scaledRect.adjusted(2,2,-2,-2), pixmap);//整体往内缩2px,给边框留空间painter->restore();painter->save();if (option.state.testFlag(QStyle::State_Selected)){//选中,绘制轮廓线painter->setBrush(Qt::NoBrush);QPen pen;pen.setStyle(Qt::SolidLine);pen.setColor(QColor("#ff0000"));pen.setWidth(2);painter->setPen(pen);painter->drawRect(scaledRect);}painter->restore();}
private:int spacing = 10;//每个网格之间的间距,这个值可以更改
};
#endif // CUSTOMDELETEGATEFORLISTVIEW_H
不支持随着QListWidget的缩放,显示的item也跟着缩放
只能在resizeEvent中将原来的delegate删除,new一个新的delegate设置进去