Qt Kosova/Albania
| Founder: | Milot Shala |
| Members: | 11 |
| Category: | Regional |
Si të renderojmë një QListView (pjesa e dytë)
Gjatë pjesës së parë shqyrtuam mundësinë se si mund të kapet një QListView gjatë renderimit duke shfrytëzuar konceptin Model/View Programming duke ndërruar ngjyrat e elementeve nëse janë të selektuara apo në rast se nuk janë të selektuara.
Si do qoftë kryesisht në aplikacione reale duhet të jemi më shumë fleksibil gjatë ndërtimit të pamjeve të aplikacioneve, sidomos duhet të jemi shumë më të kujdesshëm kur kemi të bëjmë me klientë të ndryshëm dhe kërkesa të ndryshme.
Gjatë këtij artikulli do të shqyrtojmë një mundësi se si Qt na lejon të konstruktojmë pamje si dëshirojmë duke shfrytëzuar HTML dhe CSS brenda një QLabel e cila do të jetë brenda çdo elementi të listës.
Për të mos ndërtuar projekt të ri, do ta shfrytëzojmë kodin e pjesës së parë [developer.qt.nokia.com]
E gjithë puna jonë bëhet në delegate, sepse delegate është elementi i cili komunikon me View-në dhe Model-in dhe është ndërmjetësues për renderim të të dhënave.
Duke e marrë parasysh kodin në pjesën e parë, e kemi një konstruktor i cili është i zbrazët dhe për të patur mundësi që të bëjmë renderim të qfarëdoshëm duke shfrytëzuar HTML dhe CSS ne do të duhet ta deklarojmë një QLabel objekt në heap, së pari do ta ndërrojmë header skedarin:
- #include <QItemDelegate>
- #include <QPainter>
- #include <QLabel>
- {
- Q_OBJECT
- public:
- protected:
- private:
- };
Nga kodi i kaluar kemi bërë dy ndryshime, ndryshimi i parë është ai që kemi deklaruar një objekt të tipit QLabel në pjesën private, dhe kemi shtuar një metodë në pjesën e mbrojtur (protected) me emrin sizeHint() i cili kthen një objekt QSize, sizeHint përdoret që gjatë renderimit të kemi mundësi caktimin e lartësisë dhe gjërësisë së elementeve në listën tonë dhe implementimi i tij është tejet i thjeshtë:
- {
- }
Nga funksioni kemi kthyer gjërësinë dhe gjatësinë e elementit tonë.
Kurse ndryshimi në konstruktor është ky:
- {
- m_TekstiLabel = new QLabel;
- }
Pra kemi alokuar një QLabel në heap dhe formatin e tekstit e kemi bërë tekst të pasur (Ang. Rich Text) ku në të cilën vlejnë shprehjet si:
- [b] <html> <table> <tr> <td>
Dhe më pas e kemi bërë një ndryshim tjetër në paint funksionin ( cili ndryshe njifet edhe si paint event ):
- void ListaDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const
- {
- m_TekstiLabel->setStyleSheet("background:#EE0D75; color: #D4E1B5");
- } else {
- m_TekstiLabel->setStyleSheet("background:#5396E4;");
- }
- m_TekstiLabel->setFixedSize(option.rect.width(), option.rect.height());
- }
Kemi shtuar CSS në pjesët kur është një element i selektuar dhe tjeter CSS kur elementi nuk është i selektuar dhe më pas kemi shtu tekstin i cili përmban bold tag-un në HTML për ta bërë atë pjesë më të trashë, pastaj madhësinë e kemi bërë fikse i cili varet nga sizeHint() funksioni dhe në fund kemi marrë një “screenshot” nga QLabel widget-i dhe pastaj e vizatojmë atë pamje duke shfrytëzuar funksionin drawPixmap().
Dhe pamja jonë tani duket kështu:
Për ta bërë listën tonë më atraktive, ne do të shtojmë një gradient nëse elementi është i selektuar dhe një ngjyrë solide nëse elementi nuk është i selektuar:
- m_TekstiLabel->setStyleSheet("QLabel{background:qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1,stop: 0 #5E9BFF, stop: 1 #2853FF);color:white;border-color:#FF5157;border-style: solid;border-width:1px;border-radius:6px;}");
- } else {
- m_TekstiLabel->setStyleSheet("QLabel{background:#D4E1B5;color:black;border-width:1px;border-color:black;border-style:solid;border-radius:3px}");
- }
Dhe pamja jonë u shëndrua në:
Një gjë që ja vlenë të përmendet është se gjatë pjesës së parë aplikacioni është shkruar duke përdorë Mac OS X kurse tani pamja është në Windows 7, kjo dështmon kjartë që Qt punon në shumë platforma :)
