Si të renderojmë një QListView (pjesa e parë)

Kryesisht në Qt i kemi dy widget-ë të listave. Widget-i i parë i cili ekziston ende për shkaqe të kompatibilitetit është QListWidget i cili shërben thjeshtë për shfaqjen e elementeve te asaj liste (kryesisht QListWidgetItem).

Që nga Qt 4 është shtuar një koncept i ri, i cili është Model/View Programming [doc.qt.nokia.com].

Duke mos hyrë shumë në detale për ta spjeguar se cfarë është Model/View Programming, ju lutem lexoni linkun më lartë në atë mënyrë që ta kuptoni përmbajtjen në vazhdim.

Së bashku me Model/View Programming janë shtuar edhe Widget-ë të ndryshëm si zëvendësues të Widget-ëve të vjetër sic janë:

  • QListView
  • QTreeView
  • QTableView

dhe këto klasa janë shtuar si rezultat për ti zëvendësuar klasat e listuara në vazhdim:

  • QListWidget
  • QTreeWidget
  • QTableWidget

Ne në këtë shkrim do të fokusohemi në renderimin (apo ndryshimin e pamjes) të QListView e cila bëhet nëpërmjet një delegate.

Cdo paraqitje e të dhënave nga Modeli në View në Qt bëhet përmes nje delegate.

Në kodin më poshtë paraqitet një QListView me disa të dhëna bazike të cilat gjenerohen nga një cikël dhe paraqet numrat nga 0 deri ne 99:

  1.     QStandardItemModel *model = new QStandardItemModel;
  2.     QListView *listView = new QListView;
  3.  
  4.     for(int i = 0; i < 100; i++) {
  5.         QStandardItem *item = new QStandardItem(QString::number(i));
  6.         model->appendRow(item);
  7.     }
  8.  
  9.     listView->setModel(model);
  10.    

Dhe kjo liste duket sikur në vazhdim:

pamja1

Cka duhet ti shtohet kësaj liste është një pamje më e bukur dhe ndonjë ngjyrë si prapavijë. Kjo shumë lehtë arrihet duke trashëguar një klasë nga QItemDelegate dhe duke trashëguar paint() ngjarjën sikur në vazhdim:

Header skedari:

  1. #include <QItemDelegate>
  2. #include <QPainter>
  3. #include <QModelIndex>
  4.  
  5. class ListaDelegate : public QItemDelegate
  6. {
  7.     Q_OBJECT
  8. public:
  9.     explicit ListaDelegate(QObject *parent = 0);
  10.  
  11. protected:
  12.     void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
  13. };

Source skedari:

  1. #include "listadelegate.h"
  2.  
  3. ListaDelegate::ListaDelegate(QObject *parent) :
  4.     QItemDelegate(parent)
  5. {
  6. }
  7.  
  8. void ListaDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
  9. {
  10.     if(option.state & QStyle::State_Selected) {
  11.         QColor color(68, 118, 179, 100);
  12.         QBrush brush(color);
  13.         painter->fillRect(option.rect, brush);
  14.         painter->drawText(option.rect, index.data().toString());
  15.     } else {
  16.         QColor color(232, 183, 125, 100);
  17.         QBrush brush(color);
  18.         painter->fillRect(option.rect, brush);
  19.         painter->drawText(option.rect, index.data().toString());
  20.     }
  21. }

Në source skedarë shohim kjartë që kryesisht është ndryshuar paint() ngjarja ku në të cilën është shtuar kushti nëse elementi është i përzgjedhur nga përdoruesi, ngjyra e prapavisë të bëhet e kaltër me një përqindje të transparencës, ndryshe nga kjo të jetë një ngjyrë e portokallit prap me një përqindje të transparencës, dhe më pas i vetmi ndryshim në kodin paraprak është kjo linjë:

  1. listView->setItemDelegate(new ListaDelegate());

pasi që kemi bërë thirrjen e header skedarit të listadelegate.h:

  1. #include "listadelegate.h"

dhe kodi komplet është:

  1.     QStandardItemModel *model = new QStandardItemModel;
  2.     QListView *listView = new QListView;
  3.  
  4.     for(int i = 0; i < 100; i++) {
  5.         QStandardItem *item = new QStandardItem(QString::number(i));
  6.         model->appendRow(item);
  7.     }
  8.  
  9.     listView->setItemDelegate(new ListaDelegate());
  10.  
  11.     listView->setModel(model);

Dhe për fund, pamja e fituar është:

pamja2

Vazhdoni në pjesën e dytë [developer.qt.nokia.com]