Qt QListWidgetItem 多行

Question

我有一个非常简单的QListWidget对象，我想构建一个文件夹列表。当我将一个项目添加到我的列表中时，我会执行以下操作:

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

这是有效的，但我希望我的项目具有多行或多列信息(具有不同的样式)。

我听说过 QStyledItemDelegate 但是我真的不明白它是如何工作的，因为我发现的所有其他解决方案对于这样的简单( ？)的事情。

这是唯一解决方案，还是有一些我没有看到的更简单的解决方案？

希望有人能帮助我。

Answer 1

在没有确切了解您希望列表项是什么样子的情况下，建议“最佳”解决方案有点困难，但我们会尝试一下。

Qt 线程上实际上有一篇很棒的帖子 here最后给出了他们用来创建列表的所有代码，类似于他们在顶部显示的列表。

基本上，每个项目都有一个大图标，右侧有标题和描述文本，每个项目的样式都不同。

创建自定义委托(delegate)听起来很可怕，但它基本上只是为列表提供一个自定义小部件。它的工作原理本质上就像一个模板。您可以定义列表项的外观，并使用列表中的数据来绘制它。您只需继承 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();
};

最大的工作是编写绘制函数的代码。我将在这里仅展示基础知识，但您可以引用上面的链接以获取更长的示例。

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()
{

}

因此您可以在这段代码中看到我们从列表中获取了三位数据。图标、标题和说明。然后我们显示绘制图标，并按照我们喜欢的方式绘制两个文本字符串。但重要的部分是获取数据本身。我们基本上是要求列表使用传递给我们的“索引”为我们提供数据。

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 等存储大量内容......

那么如何将所有这些信息存储在每个项目中。简单...

QListWidgetItem *item = new QListWidgetItem();
item->setData(Qt::DisplayRole, "Title");
item->setData(Qt::UserRole, "Description");
myListWidget->addItem(item);

最后，如何使用您精美的新委托(delegate)让列表显示项目？

myListWidget->setItemDelegate(new ListDelegate(myListWidget));

希望这能澄清一点。