Qt QListWidgetItem多行 [英] Qt QListWidgetItem Multiple Lines
问题描述
我有一个非常简单的QListWidget对象，我想建立一个文件夹列表.
当我将项目添加到列表中时，这就是我要做的事情:
I have a really simple QListWidget object and I want to build a folder list.
When I add an item to my list here is what I do :
void LessCC::on_addFolderButton_clicked()
{
QString dirName = QFileDialog::getExistingDirectory(this, tr("Choose Directory"), QDir::homePath(), QFileDialog::ShowDirsOnly);
QListWidgetItem* newItem = new QListWidgetItem(QIcon(":/resources/icons/folder.png"), dirName, 0, 0);
this->ui->folderListWidget->addItem(newItem);
}
这是可行的，但我希望我的商品具有多行或多列信息(具有不同的样式).
This is working but I want my items to have multiple lines or column of informations (with different style).
我听说过QStyledItemDelegate ，但是我不太了解它是如何工作的，因为我发现所有其他解决方案对于这样的 simple( ?)事情.
I heard about the QStyledItemDelegate but I don't really understand how it works because all other solutions I've found seems really complicated for such simple(?) thing.
这是 only 解决方案，还是有一些我没有看到的更简单的东西?
Is this the only solution or maybe there is something much more simple I did not see ?
希望有人可以帮助我.
推荐答案
建议最佳"解决方案有点困难，而又不会确切了解您希望列表项的外观，但是我们将尝试一下.
It's a little difficult to suggest the "best" solution without seeing exactly what you want your list item to look like, but we'll give it a try.
关于Qt线程，实际上有一个很棒的帖子此处最后，最后给出了他们用来创建列表的所有代码，就像它们在顶部显示的那样.
There is actually a great post on the Qt thread here that finally at the end gives all the code they use to create a list sort of like the one they show at the top.
基本上，每个项目都有一个大图标，在右侧有一个标题和描述文本，每种样式都不同.
Basically, each item has a large icon, and to the right there is a title and description text, each styled differently.
创建自定义委托听起来很吓人，但它基本上只是为列表提供一个自定义小部件.它的工作原理本质上类似于模板.您可以定义列表项的外观，然后使用列表中的数据对其进行绘制.您只可以从QAbstractItemDelegate继承.
Creating a custom delegate sounds scary, but it is basically just providing a custom widget for the list. It works essentially like a template. You define what you want your list item to look like, and you paint it using data from list. You just can inherit from QAbstractItemDelegate.
#include <QPainter>
#include <QAbstractItemDelegate>
class ListDelegate : public QAbstractItemDelegate
{
public:
ListDelegate(QObject *parent = 0);
void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;
QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;
virtual ~ListDelegate();
};
最大的工作是编写绘画功能.我将在此处显示基础知识，但是您可以参考上面的链接以获取更长的示例.
The biggest job is to code the paint function. I'll just show the basics here, but you can reference the link above for a longer example.
ListDelegate::ListDelegate(QObject *parent)
: QAbstractItemDelegate(parent)
{
}
void ListDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
QRect r = option.rect;
QPen fontPen(QColor::fromRgb(51,51,51), 1, Qt::SolidLine);
if(option.state & QStyle::State_Selected)
{
painter->setBrush(Qt::cyan);
painter->drawRect(r);
}
else
{
//BACKGROUND ALTERNATING COLORS
painter->setBrush( (index.row() % 2) ? Qt::white : QColor(252,252,252) );
painter->drawRect(r);
}
painter->setPen(fontPen);
//GET TITLE, DESCRIPTION AND ICON
QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
QString title = index.data(Qt::DisplayRole).toString();
QString description = index.data(Qt::UserRole).toString();
int imageSpace = 10;
if (!ic.isNull())
{
//ICON
r = option.rect.adjusted(5, 10, -10, -10);
ic.paint(painter, r, Qt::AlignVCenter|Qt::AlignLeft);
imageSpace = 55;
}
//TITLE
r = option.rect.adjusted(imageSpace, 0, -10, -30);
painter->setFont( QFont( "Lucida Grande", 6, QFont::Normal ) );
painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignBottom|Qt::AlignLeft, title, &r);
//DESCRIPTION
r = option.rect.adjusted(imageSpace, 30, -10, 0);
painter->setFont( QFont( "Lucida Grande", 5, QFont::Normal ) );
painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignLeft, description, &r);
}
QSize ListDelegate::sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
return QSize(200, 60); // very dumb value
}
ListDelegate::~ListDelegate()
{
}
因此您可以在这段代码中看到我们从列表中获取了三位数据.图标，标题和说明.然后，我们将显示绘制图标，并按我们的喜好绘制两个文本字符串.但是重要的是获取数据本身.我们基本上是在要求列表使用传递给我们的索引"为我们提供数据.
So you can see in this code we are getting three bits of data from the list. The icon, the title, and the description. Then we are displaying drawing the icon, and drawing the two text strings how we like. But the important part is getting the data itself. We are basically asking the list to give us the data using the "index" that was passed to us.
QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
QString title = index.data(Qt::DisplayRole).toString();
QString description = index.data(Qt::UserRole + 1).toString();
您会注意到，每条信息都是使用不同的角色"检索的.通常，列表仅显示一件事-可通过DisplayRole访问.图标存储在DecorationRole中.但是，如果要存储更多内容，则可以开始使用UserRole.您可以使用UserRole，UserRole + 1，UserRole +2等存储全部内容.
You'll notice that each bit of information was retrieved using a different "role". Normally a list has only one thing it displays - which is accessed through the DisplayRole. Icons are stored in the DecorationRole. But if you want to store more stuff, then you start using UserRole. You can store a whole slew of things using UserRole, UserRole +1, UserRole +2 etc....
因此，您如何将所有这些信息存储在每个项目中.容易...
So how you do you store all this information in each item. Easy...
QListWidgetItem *item = new QListWidgetItem();
item->setData(Qt::DisplayRole, "Title");
item->setData(Qt::UserRole, "Description");
myListWidget->addItem(item);
最后，如何使用新奇的委托使列表显示项目?
And finally, how do you make the list display the item using your fancy new delegate?
myListWidget->setItemDelegate(new ListDelegate(myListWidget));
希望这可以澄清一些事情.
Hopefully that clarified things a little bit.
这篇关于Qt QListWidgetItem多行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
