自定义一个QAbstractScrollArea（二）
延续上一篇文章，本文以另一种方法实现QAbstractScrollArea。此例子是一个图片缩略图的列表控件，控件沿水平方向延伸。仅作为一个例子，因为实际的图片列表可以用QListWidget实现，并不需要自己写代码。下面是程序的运行截图：
头文件：
class MListWidget : public QAbstractScrollArea { Q_OBJECT public: MListWidget(QWidget* parent = 0); void append(const QPixmap& pixmap, const QString& name); int currentItem() const; private: bool eventFilter(QObject* src, QEvent* event) override; bool viewportEvent(QEvent* event) override; void sizeChanged(const QSize &contentSize); private slots: void verticalScrollBarValueChanged(int value); void horizontalScrollBarValueChanged(int value); private: class MImageList; MImageList* lists; }; class MListWidget::MImageList : public QWidget { Q_OBJECT public: MImageList(QWidget* parent = 0); void append(const QPixmap& pixmap, const QString& name); int currentItem() const; private: void paintEvent(QPaintEvent* event) override; void mouseMoveEvent(QMouseEvent* event) override; void mousePressEvent(QMouseEvent* event) override; void mouseReleaseEvent(QMouseEvent* event) override; void enterEvent(QEvent* event) override; void leaveEvent(QEvent* event) override; private: static const QSize imageSize; static const QSize textSize; static const int itemMargin; QVector<QPixmap> images; QStringList texts; QPoint pressPt; int hoverItem; int clickItem; };
CPP文件。代码约200行太长我把它折叠了：
MListWidget::MListWidget(QWidget* parent) : QAbstractScrollArea(parent) { QScrollBar* vbar = verticalScrollBar(); connect(vbar, &QScrollBar::valueChanged, this, &MListWidget::verticalScrollBarValueChanged); QScrollBar* hbar = horizontalScrollBar(); connect(hbar, &QScrollBar::valueChanged, this, &MListWidget::horizontalScrollBarValueChanged); lists = new MImageList(viewport()); lists->installEventFilter(this); } int MListWidget::currentItem() const { return lists->currentItem(); } bool MListWidget::eventFilter(QObject* src, QEvent* event) { if (src == lists && event->type() == QEvent::Resize) { /* 内容Widget的大小变化 */ QResizeEvent* rszEvent = dynamic_cast<QResizeEvent*>(event); sizeChanged(rszEvent->size()); } return QAbstractScrollArea::eventFilter(src, event); } bool MListWidget::viewportEvent(QEvent* event) { if (event->type() == QEvent::Resize) { /* viewport的大小变化 */ sizeChanged(lists->size()); } return QAbstractScrollArea::viewportEvent(event); } void MListWidget::append(const QPixmap& pixmap, const QString& name) { lists->append(pixmap, name); } void MListWidget::verticalScrollBarValueChanged(int value) { lists->move(lists->x(), -value); } void MListWidget::horizontalScrollBarValueChanged(int value) { lists->move(-value, lists->y()); } void MListWidget::sizeChanged(const QSize &contentSize) { QScrollBar* vbar = verticalScrollBar(); vbar->setMinimum(0); vbar->setMaximum(std::max(0, contentSize.height() - viewport()->height())); vbar->setPageStep(viewport()->height()); QScrollBar* hbar = horizontalScrollBar(); hbar->setMinimum(0); hbar->setMaximum(std::max(0, contentSize.width() - viewport()->width())); hbar->setPageStep(viewport()->width()); } ///////////////////////////////////////////////////////////////////////////////////////// const QSize MListWidget::MImageList::imageSize(100, 80); const QSize MListWidget::MImageList::textSize(100, 22); const int MListWidget::MImageList::itemMargin = 6; MListWidget::MImageList::MImageList(QWidget* parent) : QWidget(parent), pressPt(0xDEADBEEF, 0xDEADBEEF) { setMouseTracking(true); hoverItem = -1; clickItem = -1; } void MListWidget::MImageList::append(const QPixmap& pixmap, const QString& name) { images.push_back(pixmap); texts.push_back(name); int count = images.size(); int w = count * (imageSize.width() + 2 * itemMargin); int h = imageSize.height() + textSize.height() + itemMargin; setFixedSize(w, h); update(); } void MListWidget::MImageList::paintEvent(QPaintEvent* event) { QPainter painter(this); for (int i = 0; i < images.size(); i++) { int x = i * (imageSize.width() + 2 * itemMargin) + itemMargin; int y = itemMargin; painter.drawPixmap(QRect(QPoint(x, y), imageSize), images[i]); y += imageSize.height(); painter.drawText(QRect(QPoint(x, y), textSize), Qt::AlignCenter, texts[i]); if (clickItem == i) { int itemx = x - itemMargin; int itemy = 0; int itemw = imageSize.width() + 2 * itemMargin - 1; int itemh = imageSize.height() + textSize.height() + itemMargin - 1; painter.save(); painter.setPen(QColor(97, 142, 229, 97)); painter.setBrush(QColor(97, 172, 249, 97)); painter.drawRect(QRect(itemx, itemy, itemw, itemh)); painter.restore(); } else if (hoverItem == i) { int itemx = x - itemMargin; int itemy = 0; int itemw = imageSize.width() + 2 * itemMargin - 1; int itemh = imageSize.height() + textSize.height() + itemMargin - 1; painter.save(); painter.setPen(QColor(97, 142, 229, 63)); painter.setBrush(QColor(97, 172, 249, 63)); painter.drawRect(QRect(itemx, itemy, itemw, itemh)); painter.restore(); } } } void MListWidget::MImageList::mouseMoveEvent(QMouseEvent* event) { int itemw = imageSize.width() + 2 * itemMargin; int itemh = imageSize.height() + textSize.height(); if (event->pos().y() < itemh) { hoverItem = event->pos().x() / itemw; update(); } } void MListWidget::MImageList::mousePressEvent(QMouseEvent* event) { if (hoverItem >= 0) { pressPt = event->pos(); update(); } } void MListWidget::MImageList::mouseReleaseEvent(QMouseEvent* event) { if ((event->pos() - pressPt).manhattanLength() <= 2) { pressPt = QPoint(0xDEADBEEF, 0xDEADBEEF); clickItem = hoverItem; update(); } } void MListWidget::MImageList::enterEvent(QEvent* event) { // do nothing. } void MListWidget::MImageList::leaveEvent(QEvent* event) { if (hoverItem >= 0) { hoverItem = -1; update(); } } int MListWidget::MImageList::currentItem() const { return clickItem; }
在主窗口添加几个项即可。下方代码中，QtTest是主窗口类，ui.ivSelect是MListWidget类：
QtTest::QtTest(QWidget *parent) : QMainWindow(parent) { ui.setupUi(this); QPixmap myImage(200, 200); myImage.fill(Qt::green); ui.ivSelect->append(myImage, u8"图像1"); ui.ivSelect->append(myImage, u8"图像2"); ui.ivSelect->append(myImage, u8"图像3"); ui.ivSelect->append(myImage, u8"图像4"); ui.ivSelect->append(myImage, u8"图像5"); ui.ivSelect->append(myImage, u8"图像6"); ui.ivSelect->append(myImage, u8"图像7"); ui.ivSelect->append(myImage, u8"图像8"); ui.ivSelect->append(myImage, u8"图像9"); ui.ivSelect->append(myImage, u8"图像A"); }
附：经过查找Qt帮助文档。我发现上方的两个处理滚动条值改变的槽函数是多余的。Qt默认已经响应了滚动条的事件，封装成虚函数QAbstractScrollArea::scrollContentsBy(...)。只需要重写这个虚函数，根据此函数传入的水平垂直偏移增量计算新的显示内容就行了。不用手动连接滚动条的信号。
