Customize QListWidgetItem, how to?

[martinn]

Thanks for your answer! I thought that it was possible to use the stylesheets just like I use to even if I was using a delegate and painted everything. My misstake.. So if I want gradient (like the picture in my first post) I should just paint the gradient. And the stylesheets can't be used at all here?

[faldzip]

Read documentation about style sheet and check theirs functionality. If you decide that all you want to have in your view can be done with style sheet, then you can just use them without implementing your custom delegate at all. But if you decide that style sheet functionality is not enough for you then I suggest to do all your custom look in custom delegate as it gives you much more ways to customize your view.

[martinn]

Now I got my delegate up and running and I was able to paint it so it looks like I want. Thanks!

One thing is that I'm trying to add an image to each row as you can see in the code below. This is really slow.. Is it always slow when adding an image for each row or am I doing something wrong in my code? Is there a better way of adding the image?

This is the code where I load my listWidget:

for (int i = 0; i < 50; i++) {
    QListWidgetItem *item = new QListWidgetItem();
    item->setData(Qt::DisplayRole, "This is the title");
    item->setData(Qt::UserRole + 1, "This is description");
    item->setData(Qt::DecorationRole, QPixmap(":/images/myimage.png"));
    listWidget.addItem(item);
}

for (int i = 0; i < 50; i++) {
    QListWidgetItem *item = new QListWidgetItem();
    item->setData(Qt::DisplayRole, "This is the title");
    item->setData(Qt::UserRole + 1, "This is description");
    item->setData(Qt::DecorationRole, QPixmap(":/images/myimage.png"));
    listWidget.addItem(item);
}

To copy to clipboard, switch view to plain text mode 

In my delegate I paint the image like this:

QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
r = option.rect;
ic.paint(painter, r, Qt::AlignVCenter|Qt::AlignLeft);

QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
r = option.rect;
ic.paint(painter, r, Qt::AlignVCenter|Qt::AlignLeft);

To copy to clipboard, switch view to plain text mode 

[dubstar_04]

hi martinn,

I am looking to implement a very similar type of list and I an wondering if it would be possible for you to share your code?

many thanks,

Dubstar_04

[martinn]

To set the delegate for a list:

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

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

To copy to clipboard, switch view to plain text mode 

ListDelegate.h:

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

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

To copy to clipboard, switch view to plain text mode 

ListDelegate.cpp:

#include "ListDelegate.h"
 
	ListDelegate::ListDelegate(QObject *parent)
	{
 
	}
 
	void ListDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const{
		QRect r = option.rect;
 
		//Color: #C4C4C4
		QPen linePen(QColor::fromRgb(211,211,211), 1, Qt::SolidLine);
 
		//Color: #005A83
		QPen lineMarkedPen(QColor::fromRgb(0,90,131), 1, Qt::SolidLine);
 
		//Color: #333
		QPen fontPen(QColor::fromRgb(51,51,51), 1, Qt::SolidLine);
 
		//Color: #fff
		QPen fontMarkedPen(Qt::white, 1, Qt::SolidLine);
 
		if(option.state & QStyle::State_Selected){
			QLinearGradient gradientSelected(r.left(),r.top(),r.left(),r.height()+r.top());
			gradientSelected.setColorAt(0.0, QColor::fromRgb(119,213,247));
			gradientSelected.setColorAt(0.9, QColor::fromRgb(27,134,183));
			gradientSelected.setColorAt(1.0, QColor::fromRgb(0,120,174));
			painter->setBrush(gradientSelected);
			painter->drawRect(r);
 
			//BORDER
			painter->setPen(lineMarkedPen);
			painter->drawLine(r.topLeft(),r.topRight());
			painter->drawLine(r.topRight(),r.bottomRight());
			painter->drawLine(r.bottomLeft(),r.bottomRight());
			painter->drawLine(r.topLeft(),r.bottomLeft());
 
			painter->setPen(fontMarkedPen);
 
		} else {
			//BACKGROUND
                        //ALTERNATING COLORS
			painter->setBrush( (index.row() % 2) ? Qt::white : QColor(252,252,252) );
			painter->drawRect(r);
 
			//BORDER
			painter->setPen(linePen);
			painter->drawLine(r.topLeft(),r.topRight());
			painter->drawLine(r.topRight(),r.bottomRight());
			painter->drawLine(r.bottomLeft(),r.bottomRight());
			painter->drawLine(r.topLeft(),r.bottomLeft());
 
			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 + 1).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()
	{
 
	}

#include "ListDelegate.h"

	ListDelegate::ListDelegate(QObject *parent)
	{
	
	}
	
	void ListDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const{
		QRect r = option.rect;
		
		//Color: #C4C4C4
		QPen linePen(QColor::fromRgb(211,211,211), 1, Qt::SolidLine);
		
		//Color: #005A83
		QPen lineMarkedPen(QColor::fromRgb(0,90,131), 1, Qt::SolidLine);
		
		//Color: #333
		QPen fontPen(QColor::fromRgb(51,51,51), 1, Qt::SolidLine);
		
		//Color: #fff
		QPen fontMarkedPen(Qt::white, 1, Qt::SolidLine);
		
		if(option.state & QStyle::State_Selected){
			QLinearGradient gradientSelected(r.left(),r.top(),r.left(),r.height()+r.top());
			gradientSelected.setColorAt(0.0, QColor::fromRgb(119,213,247));
			gradientSelected.setColorAt(0.9, QColor::fromRgb(27,134,183));
			gradientSelected.setColorAt(1.0, QColor::fromRgb(0,120,174));
			painter->setBrush(gradientSelected);
			painter->drawRect(r);
			
			//BORDER
			painter->setPen(lineMarkedPen);
			painter->drawLine(r.topLeft(),r.topRight());
			painter->drawLine(r.topRight(),r.bottomRight());
			painter->drawLine(r.bottomLeft(),r.bottomRight());
			painter->drawLine(r.topLeft(),r.bottomLeft());
			
			painter->setPen(fontMarkedPen);
			
		} else {
			//BACKGROUND
                        //ALTERNATING COLORS
			painter->setBrush( (index.row() % 2) ? Qt::white : QColor(252,252,252) );
			painter->drawRect(r);
			
			//BORDER
			painter->setPen(linePen);
			painter->drawLine(r.topLeft(),r.topRight());
			painter->drawLine(r.topRight(),r.bottomRight());
			painter->drawLine(r.bottomLeft(),r.bottomRight());
			painter->drawLine(r.topLeft(),r.bottomLeft());
			
			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 + 1).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()
	{

	}

To copy to clipboard, switch view to plain text mode 

[mero]

can anybody add example how to insert image into ListDelegate.cpp ?

[csuman]

Excellent solution.
My only problem is when I have variable text length for each Description, I cannot set dynamic sizeHint, particularly the height will be different for each item Description. Please help.

QSize ListDelegate::sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const
{
QSize(200, 60); // very dumb value ***************=> How to make this vary with each ITEM?
}

[anda_skoa]

You get the index to the cell's data.

Cheers,
_