1. 效果

使用 Delegate 自定义 QListWidget 的 item，效果如下
QListWidget 自定义item - 图1

2. 步骤

  1. 派生 QStyledIemDelegete 得到一个子类:
  1. class CMyListWidgetDelegate : public QStyledItemDelegate
  1. 为 QlistWidget 指定一个 delegate:
  1. ui->listWidget->setItemDelegate(new CMyListWidgetDelegate(ui->listWidget));
  1. QStyledIemDelegete 派生得到的子类，重写 paint 和 sizeHint 两个函数:
    重写这两个函数，目的是自定义 item 的显示:
  1. // 自定义的 item 的内容
  2. virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
  4. //决定单元格的推荐大小
  5. virtual QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;

备注: 如果没有给 QListWidget 设置 delegate， QListWidget 也会给自己创建一个默认的 delegate

3. 程序:

  • MyListWidgetDelegate.h:
  1. #ifndef MYLISTWIDGETDELEGATE_H
  2. #define MYLISTWIDGETDELEGATE_H
  4. #include <QStyledItemDelegate>
  6. class CMyListWidgetDelegate : public QStyledItemDelegate
  7. {
  8.     Q_OBJECT
  10. public:
  11.     CMyListWidgetDelegate(QObject* pParent);
  12.     virtual ~CMyListWidgetDelegate();
  14. private:
  15.     //决定如何绘图
  16.     virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
  18.     //决定单元格的推荐大小
  19.     virtual QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;
  21. };
  23. #endif // MYLISTWIDGETDELEGATE_H
  • MyListWidgetDelegate.cpp:
  1. #include "MyListWidgetDelegate.h"
  2. #include <QPainter>
  4. CMyListWidgetDelegate::CMyListWidgetDelegate(QObject *pParent)
  5.     :QStyledItemDelegate(pParent)
  6. {
  8. }
  10. CMyListWidgetDelegate::~CMyListWidgetDelegate()
  11. {
  13. }
  15. void CMyListWidgetDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
  16. {
  17.     //QStyledItemDelegate::paint(painter, option, index);
  19.     QRect rect = option.rect; // 目标矩形
  20.     rect.adjust(2,2,-2,-2); // 缩小一圈，留出空白间隔
  22.     // 取得该项对应的数据
  23.     QString qstrFileName = index.data(Qt::DisplayRole).toString();
  24.     QString qstrRecordPic = index.data(Qt::UserRole+1).toString();
  25.     int iFileSize = index.data(Qt::UserRole+2).toInt();
  27.     // 状态显示: 若该项被选中
  28.     if(option.state & QStyle::State_Selected)
  29.     {
  30.         painter->setBrush(QColor(0xCC, 0xAA, 0xAA));
  31.         painter->drawRoundedRect(rect, 2, 2);
  32.         painter->setBrush(Qt::NoBrush);
  33.     }
  35.     // 图片显示
  36.     {
  37.         QRect dst = rect;
  38.         dst.setRight(rect.left() + 40);
  39.         QRect area(0,0,24,24);
  40.         area.moveCenter(dst.center());
  42.         QPixmap pixmapPic(qstrRecordPic);
  43.         painter->drawPixmap(area, pixmapPic);
  45.     }
  47.     // 文件名显示
  48.     {
  49.         QRect dst = rect;
  50.         dst.setLeft(rect.left() + 40);
  51.         dst.setBottom(rect.top() + 20);
  52.         painter->drawText(dst, Qt::AlignLeft | Qt::AlignVCenter, qstrFileName);
  53.     }
  55.     // 文件大小
  56.     {
  57.         QRect dst = rect;
  58.         dst.setLeft(rect.left() + 40);
  59.         dst.setTop(rect.top() + 20);
  60.         painter->drawText(dst, Qt::AlignLeft | Qt::AlignVCenter, QString::number(iFileSize));
  61.     }
  63. }
  65. QSize CMyListWidgetDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const
  66. {
  67.     //return QStyledItemDelegate::sizeHint(option, index);
  69.     QSize size = QStyledItemDelegate::sizeHint(option, index);
  70.     size.setHeight(40);
  71.     return size;
  72. }
  • MainWidget.h:
  1. #ifndef MAINWIDGET_H
  2. #define MAINWIDGET_H
  4. #include <QWidget>
  6. namespace Ui {
  7. class CMainWidget;
  8. }
  10. class CMainWidget : public QWidget
  11. {
  12.     Q_OBJECT
  14. public:
  15.     explicit CMainWidget(QWidget *parent = 0);
  16.     ~CMainWidget();
  18. private:
  19.     Ui::CMainWidget *ui;
  21.     void AddItem(const QString& qstrDownloadFileName, const QString& qstrRecordPic, int iFileSize);
  22. };
  24. #endif // MAINWIDGET_H
  • MainWidget.cpp:
  1. #include "MainWidget.h"
  2. #include "ui_MainWidget.h"
  3. #include "MyListWidgetDelegate.h"
  5. CMainWidget::CMainWidget(QWidget *parent) :
  6.     QWidget(parent),
  7.     ui(new Ui::CMainWidget)
  8. {
  9.     ui->setupUi(this);
  11.     //添加数据
  12.     AddItem("Video1", ":/images/video_1.png", 1024);
  13.     AddItem("Video2", ":/images/video_2.png", 2048);
  14.     AddItem("Video3", ":/images/video_3.png", 3072);
  15.     AddItem("Video4", ":/images/video_4.png", 4096);
  16.     AddItem("Video5", ":/images/video_1.png", 5120);
  18.     //使用自定义绘图
  19.     ui->listWidget->setItemDelegate(new CMyListWidgetDelegate(ui->listWidget));
  21. }
  23. CMainWidget::~CMainWidget()
  24. {
  25.     delete ui;
  26. }
  28. void CMainWidget::AddItem(const QString& qstrDownloadFileName, const QString& qstrRecordPic, int iFileSize)
  29. {
  30.     QListWidgetItem* pItem = new QListWidgetItem();
  31.     if(nullptr != pItem)
  32.     {
  33.         pItem->setData(Qt::DisplayRole, qstrDownloadFileName);
  34.         pItem->setData(Qt::UserRole + 1, qstrRecordPic);
  35.         pItem->setData(Qt::UserRole + 2, iFileSize);
  36.         ui->listWidget->addItem(pItem);
  37.     }
  38. }
  • main.cpp:
  2. #include "MainWidget.h"
  3. #include <QApplication>
  5. int main(int argc, char *argv[])
  6. {
  7.     QApplication a(argc, argv);
  8.     CMainWidget w;
  9.     w.show();
  11.     return a.exec();
  12. }

一些其它

  • 添加分隔线Separator
  1. // Separator
  2. {
  3.     QRect dst = rect;
  4.     dst.setLeft(rect.left() + 15);
  5.     dst.setRight(rect.right() - 5);
  6.     dst.setY(rect.bottom() - 0.2);
  8.     QBrush b;
  9.     b.setColor(Qt::gray);
  10.     b.setStyle(Qt::SolidPattern);
  11.     painter->fillRect(dst, b);
  12. }
  • 如果你搞不清楚你的范围，可以把该区域都填充一个颜色:

这样，你就知道你当前的大小，高低了。

  1.     QBrush brush;
  2.     brush.setColor(Qt::yellow);
  3.     brush.setStyle(Qt::SolidPattern);
  4.     painter->setBrush(brush);
  5.     painter->drawRect(dst);
  6.     painter->setBrush(Qt::NoBrush);