QListView 仅在视图中显示单个项目

Question

我正在利用 Qt 使用的 Model View Delegate 框架来显示具有自定义“视图”或布局的对象列表。

背景：

我需要在列表中显示国旗、国家名称、城市名称和可选的“高级”评级星，用户可以选择。

为此，我使用以下组件：

• 模型 - 一个QStandardItemModel，参见doc 页面，其中包含QListView 和交互关注点的所有数据，文档页面

• 委托 - 为了以自定义布局方式绘制/显示数据，我使用 QStyledItemDelegate，请参阅 doc 页面。

• 视图 - 对于视图，一个简单的QListView 就足够了，因为这是一个包含具有自定义布局的对象集合的单列列表。

教程和帮助：

使用以下教程， 1. 一个messageviewer 应用程序，展示了如何根据以下内容实现详细的model-delegate-view 概念， 2. 诺基亚智能手机的简单messaging menu 系统的基础知识，我已经能够相对轻松地为我的QListView 创建所需的布局。

问题：

我需要将QStandardItem 项目添加到我的模型中，这将添加到我的视图中。我这样做了，委托确认了每个项目是由paint覆盖方法绘制的。

但是，在运行期间，QListView 仅显示 1 个项目。但我可以使用向上/向下箭头键来选择列表中的其他各种项目。

请看下面的代码：

设置 MVC（委托）：

mainwindow.h

//...
QStandardItemModel *modelServers;
ServerDelegate* serverDelegate;
//...

mainwindow.cpp

modelServers = new QStandardItemModel(0);
serverDelegate = new ServerDelegate(0);

ui->listServers->setModel(modelServers);
ui->listServers->setItemDelegate(serverDelegate);

并将项目 (QStandardItem's) 添加到列表中：

for (int i = 0; i < someList->length(); ++i) {
    Server server = someList->value(i);
    QStandardItem *item = new QStandardItem();
    item->setData(server.getCountryName,         item->setData(QPixmap("", "PNG"), ServerDelegate::DataRole::CountryFlag);
    item->setData(server.getCountry(), ServerDelegate::DataRole::CountryText);
    item->setData(server.getCity(), ServerDelegate::DataRole::CityText);
    item->setData(i, ServerDelegate::ListIndex);
    //...
    modelServer->appendRow(item)
}

列表最后显示数据，但列表仅填充项目，但只有第一个具有可见文本和图像。

注意：向下滚动时，只有顶部的项目可见，示例见下图。

例如

初始加载列表：

向下滚动一次

选择没有文字/图像的项目：

以下附加代码：

ServerDelegate 处理自定义布局的类

ServerDelegate.h

#ifndef SERVERDELEGATE_H
#define SERVERDELEGATE_H

#include <QApplication>
#include <QtGui>
#include <QStyledItemDelegate>
#include <QtWidgets>
#include <qglobal.h>

#include "global.h"

class ServerDelegate : public QStyledItemDelegate
{
    Q_OBJECT
public:
    ServerDelegate(QStyledItemDelegate* parent = 0);
    virtual ~ServerDelegate();

    enum DataRole{
        CountryText = Qt::UserRole + 100,
        CityText = Qt::UserRole+101,
        CountryFlag = Qt::UserRole+102,
        SideIconFlag = Qt::UserRole+103,
        ListIndex = Qt::UserRole+105
    };

    void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;

    QSize sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const;

private:
    QFont fontCountry, fontCity;
};

#endif // SERVERDELEGATE_H

ServerDelegate.cpp

#include "serverdelegate.h"

ServerDelegate::ServerDelegate(QStyledItemDelegate *parent)
    : QStyledItemDelegate(parent)
{
    fontCountry = QApplication::font();
    fontCountry.setBold(true);
    fontCountry.setPointSize(QApplication::font().pointSize() + 3);

    fontCity = QApplication::font();
    fontCity.setItalic(true);
    fontCity.setPointSize(QApplication::font().pointSize() - 1);
}

ServerDelegate::~ServerDelegate(){
}

QSize ServerDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const{
    Q_UNUSED(index)
    QSize totalCountrySize = QPixmap("","").size();
    QSize totalSideIcon = QPixmap(":/res/images/premium", "PNG").size();

    QFontMetrics fmCountry(fontCountry);
    QFontMetrics fmCity(fontCity);

    int fontHeight = (2 * 2) + (2 * 5) + fmCountry.height() + fmCity.height();
    int iconHeight = (2 * 2) + (totalCountrySize.height() > totalSideIcon.height() ? totalCountrySize.height() : totalSideIcon.height());
    int height = (fontHeight > iconHeight) ? fontHeight : iconHeight;

    int width = option.rect.width();
    QSize size = QSize(width, height);

    return size;
}

void ServerDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const{
    QStyledItemDelegate::paint(painter, option, index);

    QRect rec = option.rect;

    painter->save();
    painter->setClipRect(rec);

    QString countryText = index.data(DataRole::CountryText).toString();
    QString cityText = index.data(DataRole::CityText).toString();
    QPixmap countryFlag = QPixmap(qvariant_cast<QPixmap>(index.data(DataRole::CountryFlag)));
    QPixmap sideIcon = qvariant_cast<QPixmap>(index.data(DataRole::SideIconFlag));

    // Get a rectangle by size x, y.
    // With cooridinates [0,0]; [x,0]; [x,y]; [0,y]
    QRect topLine = option.rect,
            bottomLine = option.rect;

    // create top 'seperator' of X px's width, green in color;
    topLine.setTop(0);
    topLine.setLeft(0);
    topLine.setRight(option.rect.width());
    topLine.setBottom(2); // 1px down

    painter->setPen(QColor(116, 183, 151));
    painter->fillRect(topLine, QColor(116, 183, 151));
    painter->drawRect(topLine);

    // create bottom 'seperator' of X px's width, green in color;
    bottomLine.setTop(option.rect.height() - 2);
    bottomLine.setLeft(0);
    bottomLine.setRight(option.rect.width());
    bottomLine.setBottom(option.rect.height()); // 1px down

    painter->setPen(QColor(116, 183, 151));
    painter->fillRect(bottomLine, QColor(116, 183, 151));
    painter->drawRect(bottomLine);

    // create background rectangle
    QRect content(0, topLine.bottom(), option.rect.width(), bottomLine.top());

    painter->setPen(QColor(116, 183, 151));
    painter->fillRect(content, QColor(116, 183, 151));
    painter->drawRect(content);

    // create content rectangles from content container.

    QRect rectCountryFlag = content,
            rectSideIcon = content;

    //    create country icon rectangle
    QSize countryFlagSize = countryFlag.size();
    int cFPos = (rectCountryFlag.height() / 2) - (countryFlagSize.height() / 2) - 8;
    rectCountryFlag.setTop(cFPos);
    rectCountryFlag.setBottom(content.height() - cFPos);
    rectCountryFlag.setLeft(20 - 8);
    rectCountryFlag.setRight(20 + 16 + countryFlagSize.width());

    painter->drawPixmap(rectCountryFlag, countryFlag);

    //    create side icon rectangle
    QSize sideIconSize = sideIcon.size();
    int siPos = (rectSideIcon.height() / 2) - (sideIconSize.height() / 2) - 4;
    rectSideIcon.setTop(siPos);
    rectSideIcon.setBottom(content.height() - siPos);
    rectSideIcon.setLeft(rec.width() - (10 + 8 + sideIconSize.width()));
    rectSideIcon.setRight(rec.width() - 10);

    painter->drawPixmap(rectSideIcon, sideIcon);

    const QRect textContent(rectCountryFlag.right() + 5 + 20, content.top() + 5,
                            rectSideIcon.left() - 5, content.bottom() - 5);

    // create country text rectangle

    QRect rectCountryText = content,
            rectCityText = content;

    rectCountryText.setLeft(textContent.left());
    rectCountryText.setTop(textContent.top());
    rectCountryText.setRight(textContent.right());
    rectCountryText.setBottom(qRound(textContent.height() * 0.6) - 5);

    painter->setPen(QColor(26, 26, 26));
    painter->setFont(fontCountry);
    painter->drawText(rectCountryText, countryText);

    // create city text rectangle

    rectCityText.setLeft(textContent.left() + ( 2 * 5));
    rectCityText.setTop(rectCountryText.bottom() + 5);
    rectCityText.setRight(textContent.right());
    rectCityText.setBottom(textContent.height());

    painter->setPen(QColor(77, 77, 77));
    painter->setFont(fontCity);
    painter->drawText(rectCityText, cityText);

    // restore painter
    painter->restore();
}

Answer 1

在我发布我的答案之前，向scopchanov 大声疾呼，感谢他提供的帮助和示例，同时也暗示每次调用paint 时都会发生偏移，这是我很高兴没有意识到的。

问题说明：

option.rect 提供的偏移值与sizeHint 方法返回的QSize 相同。就我而言，我关心的是y offset，它的值为56。

我的理解

使用迭代偏移值的概念，我修改了我的代码（之前有所需的输出），我假设paint 方法是从[0,0] 的原点绘制的，事实上我必须考虑到对于偏移量 aswel，即我没有提供放置在下一个 QListView 项目位置的 容器，而是为我提供了下一个 QListView 项目起点的位置，并且需要从那里构建项目。

解决办法：

在我的例子中，我有所需的项目布局，但项目被绘制在彼此之上，由于 [0,0] 原点，导致single item 效果。在更改了一些值并构建了一个依赖层次之后，我看到了一个具有所需布局的项目列表。

守则

更新了 ServerDelegate.cpp

#include "serverdelegate.h"

ServerDelegate::ServerDelegate(QStyledItemDelegate *parent)
    : QStyledItemDelegate(parent)
{
    fontCountry = QApplication::font();
    fontCountry.setBold(true);
    fontCountry.setPointSize(QApplication::font().pointSize() + 3);

    fontCity = QApplication::font();
    fontCity.setItalic(true);
    fontCity.setPointSize(QApplication::font().pointSize() - 1);
}

ServerDelegate::~ServerDelegate(){
}

QSize ServerDelegate::sizeHint(const QStyleOptionViewItem &option, const QModelIndex &index) const{
    Q_UNUSED(index)
    QSize totalCountrySize = Global::getCountryFlagFromCache(index.data(DataRole::CountryText).toString()).size();
    QSize totalSideIcon = QPixmap(":/res/images/premium", "PNG").size();

    QFontMetrics fmCountry(fontCountry);
    QFontMetrics fmCity(fontCity);

    int fontHeight = (2 * AppGlobal::Style_List_Seperator_Width) + (2 * AppGlobal::Style_List_Text_Item_Margin) + fmCountry.height() + fmCity.height();
    int iconHeight = (2 * AppGlobal::Style_List_Seperator_Width) + (totalCountrySize.height() > totalSideIcon.height() ? totalCountrySize.height() : totalSideIcon.height());
    int height = (fontHeight > iconHeight) ? fontHeight : iconHeight;

    int width = option.rect.width();
    QSize size = QSize(width, height);

    return size;
}

void ServerDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const{
    QStyledItemDelegate::paint(painter, option, index);

    QFontMetrics fmCountry(fontCountry);
    QFontMetrics fmCity(fontCity);

    QRect rec = option.rect;

    painter->save();
    painter->setClipRect(rec);

    QString countryText = index.data(DataRole::CountryText).toString();
    QString cityText = index.data(DataRole::CityText).toString();
    QPixmap countryFlag = QPixmap(qvariant_cast<QPixmap>(index.data(DataRole::CountryFlag)));
    QPixmap sideIcon = qvariant_cast<QPixmap>(index.data(DataRole::SideIconFlag));

    // Get a rectangle by size x, y.
    // With cooridinates [0,0]; [x,0]; [x,y]; [0,y]
    QRect topLine = option.rect,
            bottomLine = option.rect;

    // create top 'seperator' of X px's width, green in color;
    topLine.setTop(rec.top());
    topLine.setLeft(rec.left());
    topLine.setRight(rec.right());
    topLine.setBottom(rec.top() + AppGlobal::Style_List_Seperator_Width); // 1px down

    painter->setPen(AppGlobal::Style_List_Seperator_Color);
    painter->fillRect(topLine, AppGlobal::Style_List_Seperator_Color);
    painter->drawRect(topLine);

    // create bottom 'seperator' of X px's width, green in color;
    bottomLine.setTop(rec.bottom() - AppGlobal::Style_List_Seperator_Width);
    bottomLine.setLeft(rec.left());
    bottomLine.setRight(rec.right());
    bottomLine.setBottom(rec.bottom()); // 1px down

    painter->setPen(AppGlobal::Style_List_Seperator_Color);
    painter->fillRect(bottomLine, AppGlobal::Style_List_Seperator_Color);
    painter->drawRect(bottomLine);

    // create background rectangle
    QRect content(rec.left(), topLine.bottom(), (rec.right() - rec.left()), (bottomLine.top() - topLine.bottom()));

    painter->setPen(AppGlobal::Style_List_Background_Color);
    painter->fillRect(content, ((option.state & QStyle::State_MouseOver) ? AppGlobal::Style_List_Hover_Color : AppGlobal::Style_List_Background_Color ));
    painter->drawRect(content);

    // create content rectangles from content container.

    QRect rectCountryFlag = content,
            rectSideIcon = content;

    //    create country icon rectangle
    QSize countryFlagSize = countryFlag.size();
    int cFPos = ((rectCountryFlag.bottom() - rectCountryFlag.top()) / 2) - (countryFlagSize.height() / 2) - 8;
    rectCountryFlag.setTop(rectCountryFlag.top() + cFPos);
    rectCountryFlag.setBottom(content.bottom() - cFPos);
    rectCountryFlag.setLeft(AppGlobal::Style_List_Left_Item_Margin - 8);
    rectCountryFlag.setRight(AppGlobal::Style_List_Left_Item_Margin + 16 + countryFlagSize.width());

    painter->drawPixmap(rectCountryFlag, countryFlag);

    //    create side icon rectangle
    QSize sideIconSize = sideIcon.size();
    int siPos = ((rectSideIcon.bottom() - rectSideIcon.top()) / 2) - (sideIconSize.height() / 2) - 4;
    rectSideIcon.setTop(rectSideIcon.top() + siPos);
    rectSideIcon.setBottom(content.bottom() - siPos);
    rectSideIcon.setLeft(rec.width() - (AppGlobal::Style_List_Right_Item_Margin + 8 + sideIconSize.width()));
    rectSideIcon.setRight(rec.width() - AppGlobal::Style_List_Right_Item_Margin);

    painter->drawPixmap(rectSideIcon, sideIcon);

    int textContentLeft = rectCountryFlag.right() + AppGlobal::Style_List_Text_Item_Margin + AppGlobal::Style_List_Left_Item_Margin,
            textContentTop = content.top() + AppGlobal::Style_List_Text_Item_Margin;

    const QRect textContent( textContentLeft , textContentTop,
                            (rectSideIcon.left() - AppGlobal::Style_List_Text_Item_Margin) - textContentLeft, (content.bottom() - AppGlobal::Style_List_Text_Item_Margin) - textContentTop);

    // create country text rectangle

    QRect rectCountryText = content,
            rectCityText = content;

    rectCountryText.setLeft(textContent.left());
    rectCountryText.setTop(textContent.top());
    rectCountryText.setRight(textContent.right());
    rectCountryText.setBottom(textContent.top() + fmCountry.height());

    painter->setPen(AppGlobal::Style_Heading_Color);
    painter->setFont(fontCountry);
    painter->drawText(rectCountryText, countryText);

    // create city text rectangle

    rectCityText.setLeft(textContent.left() + ( 2 * AppGlobal::Style_List_Text_Item_Margin));
    rectCityText.setTop(rectCountryText.bottom());
    rectCityText.setRight(textContent.right());
    rectCityText.setBottom(textContent.bottom() + fmCity.height());

    painter->setPen(AppGlobal::Style_SubText_Color);
    painter->setFont(fontCity);
    painter->drawText(rectCityText, cityText);

    // restore painter
    painter->restore();
}

Answer 2

您描述的问题是自定义QStyledItemDelegate中的paint方法重新实现错误导致的。您假设 (0, 0) 作为原点并绘制与该点相关的所有内容。但是，每个项目都有一个垂直偏移，您必须通过使用 QStyleOption::rect 的几何图形来考虑这一点。

这里是 an example 的一位精美代表，他提供了自定义绘图和动画，可进一步帮助您。