QListView 仅在视图中显示单个项目
Posted
技术标签:
【中文标题】QListView 仅在视图中显示单个项目【英文标题】：QListView only showing a single item in the view 【发布时间】：2017-12-12 22:24:29 【问题描述】：我正在利用 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();
【问题讨论】：
我之前在使用自定义代表时遇到过这样的问题。问题是每个项目的偏移量。在委托的绘制方法中，我在 (0, 0) 的原点绘制了所有内容，这导致了您描述的效果。在你的绘画方法中，我看到QRect topLine = option.rect，然后是topLine.setTop(0);。此外还有QRect content(0, topLine.bottom(), option.rect.width(), bottomLine.top());。在我看来这是同样的错误吗？使用option.rect 提供的原点（无需修改），应该没问题。
请看that。
感谢您的积极反馈！请随意使用代码原样或根据您自己的目的对其进行修改。如果您不介意，我将添加有关起源的解释作为答案，以帮助将来可能偶然发现此问题的任何人。
@scopchanov 请这样做，因为我很难找到一个可靠的 listview-model-delegate 框架示例，这在我的帖子中可能很明显;)
让我们continue this discussion in chat。
【参考方案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();
【讨论】：
如果你喜欢这个例子，你可能会发现使用that library的this example也很有用。【参考方案2】：您描述的问题是自定义QStyledItemDelegate中的paint方法重新实现错误导致的。您假设 (0, 0) 作为原点并绘制与该点相关的所有内容。但是，每个项目都有一个垂直偏移，您必须通过使用 QStyleOption::rect 的几何图形来考虑这一点。
这里是 an example 的一位精美代表，他提供了自定义绘图和动画，可进一步帮助您。
【讨论】：
一个小更新，值得。您对偏移量是 100% 正确的。我没有意识到这一点，在我的案例yOffset += 56px 中添加的每个绘画调用，并且通过快速找到新偏移块的 middle 使我的元素消失，导致出现 1 个项目。谢谢你，好先生！以上是关于QListView 仅在视图中显示单个项目的主要内容，如果未能解决你的问题，请参考以下文章