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）添加到列表中：

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)
}

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

注意：向下滚动时，只有顶部项目可见，请参阅下面的图片以获取示例。

e.g。

初始加载列表：

向下滚动

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

以下附加代码：

处理自定义布局的

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

您描述的问题是由于在自定义QStyledItemDelegate中重新实现paint方法时出错。假设（0,0）作为原点并绘制相对于该点的所有内容。但是，每个项目都有一个垂直偏移量，您必须使用QStyleOption::rect的几何体来考虑它。

这是一个花哨代表的an example，其中包含自定义绘图和动画，可以帮助您进一步提升。

Answer 2

在我发布我的答案之前，对scopchanov提供的帮助和示例提出了一个很大的呐喊，也暗示了每次调用paint时都会发生偏移的事实，这是我幸福的事情不知道。

问题解释：

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

我的理解

使用迭代偏移值的概念，我修改了我的代码（之前有所需的输出），我假设paint方法是从[0,0]的原点绘制的，其中infact我不得不考虑偏移量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();
}

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

2 个答案: