Manuel Freiholz

Oft sind die Standardansichten von Listen oder Tabellen nicht zu gebrauchen. Man möchte ein eigenes Listendesign verwenden. Da ich es selbst gerade für ein Projekt benötige, habe ich mal ein kleines Beispiel Projekt erstellt. Am Ende sieht das ganze dann so aus:

Bei meinem Ansatz war mir wichtig, das ich das QWidget, welches dann in der QListView angezeigt wird, im QtDesigner erstellen kann. So sieht mein Entwurf aus:

Ich habe einfach alles in zwei Dateien gepackt für dieses Beispiel. Hier nun erstmal die Header Datei.

customwidget.h
[cpp]
#ifndef _CUSTOMWIDGET_HEADER_
#define _CUSTOMWIDGET_HEADER_

#include <QtGui/QWidget>
#include <QtGui/QItemDelegate>

#include "ui_customlistviewitem.h"

/*
\class MyCustomListViewItem
*/
class MyCustomListViewItem : public QWidget
{
Q_OBJECT
public:
MyCustomListViewItem(QWidget * parent = 0, Qt::WindowFlags f = 0);
~MyCustomListViewItem();

public:
Ui::CustomListViewItemWidgetForm _ui;
};

/*
\class MyCustomListViewItem
*/
class MyCustomListViewItemDelegate : public QItemDelegate
{
public:
MyCustomListViewItemDelegate(QObject * parent = 0);
~MyCustomListViewItemDelegate();
virtual void paint(QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index) const;
virtual QSize sizeHint(const QStyleOptionViewItem & option, const QModelIndex & index) const;

protected:
MyCustomListViewItem * _itemWidget;
};

/*
\class MyCustomListViewItem
*/
class MyListModel : public QAbstractListModel
{
public:
MyListModel(QObject * parent = 0);
~MyListModel();
int rowCount(const QModelIndex & parent = QModelIndex()) const;
QVariant data(const QModelIndex & index, int role = Qt::DisplayRole) const;
};

/*
\class MyCustomListViewItem
*/
class MyWidget : public QWidget
{
Q_OBJECT
public:
MyWidget(QWidget * parent = 0, Qt::WindowFlags f = 0);
~MyWidget();
};

#endif
[/cpp]

Die *.cpp Datei enthält nun die komplette Implementierung.

customwidget.cpp
[cpp]
#include "customwidget.h"

#include <QtGui/QBoxLayout>
#include <QtGui/QListView>
#include <QtGui/QPainter>

/*
\class MyCustomListViewItem
*/
MyCustomListViewItem::MyCustomListViewItem(QWidget * parent, Qt::WindowFlags f)
:QWidget(parent, f)
{
_ui.setupUi(this);
}

MyCustomListViewItem::~MyCustomListViewItem()
{
}

/*
\class MyCustomListViewItemDelegate
*/
MyCustomListViewItemDelegate::MyCustomListViewItemDelegate(QObject * parent)
:QItemDelegate(parent)
,_itemWidget(new MyCustomListViewItem())
{
}

MyCustomListViewItemDelegate::~MyCustomListViewItemDelegate()
{
if (_itemWidget)
{
delete _itemWidget;
_itemWidget = NULL;
}
}

void MyCustomListViewItemDelegate::paint(QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index) const
{
_itemWidget->resize(option.rect.size());

// Update data of widget here.
const QString s = index.data().toString();
const QString s2 = QString("In detail it means %1").arg(s);
_itemWidget->_ui.labelHead->setText(s);
_itemWidget->_ui.labelDescription->setText(s2);
_itemWidget->_ui.progressBar->setValue( index.row() * 2 );

// Change the background color of the widget if it is selected.
QPalette pal;
if ((option.state & QStyle::State_Selected) == QStyle::State_Selected)
{
pal.setBrush(QPalette::Window, QBrush(QColor(Qt::lightGray)));
}
else
{
pal.setBrush(QPalette::Window, QBrush(QColor(Qt::transparent)));
}
_itemWidget->setPalette(pal);

// Paint the widget now.
painter->save();
painter->translate(option.rect.topLeft());
_itemWidget->render(painter);
painter->restore();
}

QSize MyCustomListViewItemDelegate::sizeHint(const QStyleOptionViewItem & option, const QModelIndex & index) const
{
const int width = _itemWidget->minimumWidth();
const int height = _itemWidget->height();
return QSize(width, height);
}

/*
\class MyListModel
*/
MyListModel::MyListModel(QObject * parent)
:QAbstractListModel(parent)
{
}

MyListModel::~MyListModel()
{
}

int MyListModel::rowCount(const QModelIndex & parent) const
{
return 35;
}

QVariant MyListModel::data(const QModelIndex & index, int role) const
{
if (!index.isValid())
{
return QVariant();
}

if (role == Qt::DisplayRole)
{
const QString s = QString("Data #%1").arg(index.row());
return s;
}
return QVariant();
}

/*
\class MyWidget
*/
MyWidget::MyWidget(QWidget * parent, Qt::WindowFlags f)
:QWidget(parent, f)
{
QBoxLayout * l = new QBoxLayout(QBoxLayout::TopToBottom, this);

QListView * listView = new QListView(this);
listView->setItemDelegate(new MyCustomListViewItemDelegate());
listView->setModel(new MyListModel());

l->addWidget(listView);

setLayout(l);
resize(450, 300);
}

MyWidget::~MyWidget()
{
}
[/cpp]

Bestimmt gibt es noch viele andere Möglichkeiten das gewünschte Ziel zu erreichen, nur das war jetzt mal mein Erster Ansatz.

Qt Version: 4.5.2 (Sollte aber auch mit neueren Versionen gehen)