Page 1 of 2 12 LastLast
Results 1 to 20 of 25

Thread: Customize QListWidgetItem, how to?

  1. #1
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Customize QListWidgetItem, how to?

    I'm using QListWidget to list things in my application. It's very easy to use but also very simple. What if I want a custom design of my QListWidgetItem? The standard is just one row of text but what if I want one large label and other smaller labels that shows text on my QListWidgetItem? Is there an easy way to cusomize this or should I use some other widget for this? Also is there possible to add Buttons on the QListWidgetItem?

    A list like this is something I would like:


    Thanks really much for your help!

  2. The following 3 users say thank you to martinn for this useful post:

    hisong1988 (25th December 2010), Lawand (22nd February 2011), steveyzhang (4th February 2011)

  3. #2
    Join Date
    Oct 2009
    Location
    Mexico
    Posts
    81
    Thanks
    6
    Thanked 10 Times in 10 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    i think iis more simple use a QListView whit a custom delegate.
    Last edited by ecanela; 2nd February 2010 at 19:52. Reason: updated contents

  4. #3
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    Hi and thanks!

    Is there any examples on how to use a custom delegate for a QListView?

  5. #4
    Join Date
    Sep 2009
    Location
    UK
    Posts
    2,447
    Thanks
    6
    Thanked 348 Times in 333 Posts
    Qt products
    Qt4
    Platforms
    Windows

    Default Re: Customize QListWidgetItem, how to?

    Sure, in the 'examples' directory of the Qt distribution

  6. #5
    Join Date
    Oct 2008
    Posts
    306
    Thanks
    6
    Thanked 9 Times in 8 Posts
    Qt products
    Qt5
    Platforms
    Windows

    Default Re: Customize QListWidgetItem, how to?

    Also check the ICS Network video tutorials at : http://www.ics.com/learning/icsnetwork/
    Look for the model-view framework video.

  7. #6
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    Its not necessary to use QListView for delegates. You can use delgates with QListWidget.
    Check the spin box and star delegate examples in Qt Demo.

  8. The following user says thank you to aamer4yu for this useful post:

    martinn (5th February 2010)

  9. #7
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    Thanks for your help!

    I found out that I also could use QListWidget::setItemWidget(), which seems simplier than using a delegate?

    This is what I tried, I can now build the ui of MyItem using the Design Editor:

    Qt Code:
    1. //MyItem is a custom widget that takes two strings and sets two labels to those string.
    2. MyItem *myItem = new MyItem("Text for label1","Text for label2");
    3. item->setSizeHint(QSize(0,65));
    4. ui.listWidget->addItem(item);
    5. ui.listWidget->setItemWidget(item,myItem);
    To copy to clipboard, switch view to plain text mode 

    What is the best way if all I want is to show two different labels and an image, using a delegate or setItemWidget() like above? Is the way I use above a "heavy" solution?

    If I use a delegate can I create my ListItem using Designer Editor then? And if so, where can I find examples of this?

    Thanks again!
    Last edited by martinn; 3rd February 2010 at 11:46.

  10. The following 3 users say thank you to martinn for this useful post:

    Astronomy (3rd February 2010), JandunCN (30th December 2013), San_Cou (17th January 2013)

  11. #8
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    Is the way I use above a "heavy" solution?
    Yes

    If you use delegate, you can create your item in designer, but you cant see the effects of the delegate from the designer. You will need to run the code and check

  12. #9
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    Thanks! I thought it seemed a little heavy..

    Is there any examples of using the designer when creating the item? (Sorry but I'm a real newbie to Qt)

  13. #10
    Join Date
    May 2009
    Location
    Vienna
    Posts
    91
    Thanks
    18
    Thanked 5 Times in 5 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    Hi,
    Thanks to all for these General ideas, i can use them for my similar problem too.

    greetz Astronomy

  14. #11
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    In the designer, double click on the QListWidget, you will get a dialog to add items.
    Did you try it yet ?

  15. #12
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    Quote Originally Posted by aamer4yu View Post
    In the designer, double click on the QListWidget, you will get a dialog to add items.
    Did you try it yet ?
    Oh sorry! What I meant was if I could use the designer to build the item in the delegate. Right now I'm using the code below to create the delegate with QPainter as you can see. But I would like it if it was possible to create my ui in the designer instead and add my labels and so on.

    Is that possible? And is there any examples of this?

    Qt Code:
    1. void MyDelegate::paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const {
    2. QColor background;
    3.  
    4. if (option.state & QStyle::State_Selected) {
    5. background = Qt::darkGray;
    6. } else {
    7. background = Qt::lightGray;
    8. }
    9. painter->fillRect(....
    10. ....
    11. //More code here
    12. ....
    13. painter->drawText(option.rect, Qt::AlignCenter, index.model()->data(index).toString());
    14. }
    To copy to clipboard, switch view to plain text mode 

  16. #13
    Join Date
    Oct 2006
    Location
    New Delhi, India
    Posts
    2,467
    Thanks
    8
    Thanked 334 Times in 317 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    I dont think so. If it were, designer would not be a designer but a IDE then, isnt it ?

  17. #14
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    Thanks for your help! With your help I have now understand that I should use a delegate. This is how I'm testing it right now. It works just like I want as I can place my text with painter wherever I want. Thanks!

    My problem is now that from this blog http://labs.trolltech.com/blogs/2007...ng-item-views/ I have understood that my delegate should be able to use the QStyles that is set in the application. So what I do in my application is just to set the stylesheets for QListWidget::item and QListWidget::item:selected but nothing happens to my QListWidget::items that is created in the delegate. What am I doing wrong here? Should I do something else in my paint method to get Stylesheets working?

    This is my code:
    Qt Code:
    1. class MyDelegate : public QStyledItemDelegate {
    2. public:
    3. MyDelegate(QObject *parent=0) : QStyledItemDelegate (parent){}
    4.  
    5. void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const{
    6. if(option.state & QStyle::State_Selected){
    7. painter->fillRect(option.rect, option.palette.color(QPalette::Highlight));
    8. }
    9.  
    10. QString title = index.data(Qt::DisplayRole).toString();
    11. QString description = index.data(Qt::UserRole + 1).toString();
    12.  
    13. r = option.rect.adjusted(50, 0, 0, -50);
    14. painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignBottom|Qt::AlignLeft|Qt::TextWordWrap, title, &r);
    15.  
    16. r = option.rect.adjusted(50, 50, 0, 0);
    17. painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignLeft|Qt::TextWordWrap, description, &r);
    18. }
    19.  
    20. QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const{
    21. return QSize(200, 100);
    22. }
    23. };
    24.  
    25. int main(int argc, char **argv){
    26. QApplication app(argc, argv);
    27. QListWidget listWidget;
    28.  
    29. app.setStyleSheet("QListWidget { background: red; } QListWidget::item { background: yellow; } QListWidget::item:selected { background: blue; }");
    30.  
    31. for (int i = 0; i < 4; i++) {
    32. item->setData(Qt::DisplayRole, "This is the title");
    33. item->setData(Qt::UserRole + 1, "This is description");
    34. listWidget.addItem(item);
    35. }
    36.  
    37. listWidget.setItemDelegate(new MyDelegate(&listWidget));
    38. listWidget.showMaximized();
    39. return app.exec();
    40. }
    To copy to clipboard, switch view to plain text mode 

  18. #15
    Join Date
    Jan 2008
    Location
    Poland
    Posts
    687
    Thanks
    4
    Thanked 140 Times in 132 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    Style is a different thing than Style Sheet. You always have some style in your app. If you are using windows xp then your style is WindowsXP (You can try different styles running your app with e.g. -style plastique or -style cleanlooks). And when settings style you either use style sheets or paint it your self. I can't understand why you are setting style sheet if then you are painting items in your own way?
    And about style and widgets on item views: You can use QStyle class for drawing controls (and you can obtain your actual style with QApplication::style() static method) or use QStylePainter which is QPainter with QStyle's ability to draw controls.
    With this you can draw for example a push button. But remember that it is only drawn button so it is let's say a picture of a button, so you have to implement event handling by yourself (like getting know when to draw a highlighted button and when sunken button etc).
    I would like to be a "Guru"

    Useful hints (try them before asking):
    1. Use Qt Assistant
    2. Search the forum

    If you haven't found solution yet then create new topic with smart question.

  19. The following user says thank you to faldzip for this useful post:

    martinn (5th February 2010)

  20. #16
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    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?

  21. #17
    Join Date
    Jan 2008
    Location
    Poland
    Posts
    687
    Thanks
    4
    Thanked 140 Times in 132 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Customize QListWidgetItem, how to?

    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.
    I would like to be a "Guru"

    Useful hints (try them before asking):
    1. Use Qt Assistant
    2. Search the forum

    If you haven't found solution yet then create new topic with smart question.

  22. #18
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    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:
    Qt Code:
    1. for (int i = 0; i < 50; i++) {
    2. item->setData(Qt::DisplayRole, "This is the title");
    3. item->setData(Qt::UserRole + 1, "This is description");
    4. item->setData(Qt::DecorationRole, QPixmap(":/images/myimage.png"));
    5. listWidget.addItem(item);
    6. }
    To copy to clipboard, switch view to plain text mode 

    In my delegate I paint the image like this:
    Qt Code:
    1. QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
    2. r = option.rect;
    3. ic.paint(painter, r, Qt::AlignVCenter|Qt::AlignLeft);
    To copy to clipboard, switch view to plain text mode 

  23. #19
    Join Date
    Feb 2010
    Posts
    27
    Thanks
    4
    Thanked 1 Time in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    MacOS X Unix/X11 Windows Symbian S60

    Default Re: Customize QListWidgetItem, how to?

    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

  24. #20
    Join Date
    Feb 2010
    Posts
    51
    Thanks
    9
    Thanked 14 Times in 4 Posts

    Default Re: Customize QListWidgetItem, how to?

    To set the delegate for a list:
    Qt Code:
    1. myListWidget->setItemDelegate(new ListDelegate(myListWidget));
    2. item->setData(Qt::DisplayRole, "Title");
    3. item->setData(Qt::UserRole + 1, "Description");
    4. myListWidget->addItem(item);
    To copy to clipboard, switch view to plain text mode 

    ListDelegate.h:
    Qt Code:
    1. #include <QPainter>
    2. #include <QAbstractItemDelegate>
    3.  
    4. class ListDelegate : public QAbstractItemDelegate
    5. {
    6. public:
    7. ListDelegate(QObject *parent = 0);
    8.  
    9. void paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const;
    10. QSize sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const;
    11.  
    12. virtual ~ListDelegate();
    13.  
    14. };
    To copy to clipboard, switch view to plain text mode 

    ListDelegate.cpp:
    Qt Code:
    1. #include "ListDelegate.h"
    2.  
    3. ListDelegate::ListDelegate(QObject *parent)
    4. {
    5.  
    6. }
    7.  
    8. void ListDelegate::paint ( QPainter * painter, const QStyleOptionViewItem & option, const QModelIndex & index ) const{
    9. QRect r = option.rect;
    10.  
    11. //Color: #C4C4C4
    12. QPen linePen(QColor::fromRgb(211,211,211), 1, Qt::SolidLine);
    13.  
    14. //Color: #005A83
    15. QPen lineMarkedPen(QColor::fromRgb(0,90,131), 1, Qt::SolidLine);
    16.  
    17. //Color: #333
    18. QPen fontPen(QColor::fromRgb(51,51,51), 1, Qt::SolidLine);
    19.  
    20. //Color: #fff
    21. QPen fontMarkedPen(Qt::white, 1, Qt::SolidLine);
    22.  
    23. if(option.state & QStyle::State_Selected){
    24. QLinearGradient gradientSelected(r.left(),r.top(),r.left(),r.height()+r.top());
    25. gradientSelected.setColorAt(0.0, QColor::fromRgb(119,213,247));
    26. gradientSelected.setColorAt(0.9, QColor::fromRgb(27,134,183));
    27. gradientSelected.setColorAt(1.0, QColor::fromRgb(0,120,174));
    28. painter->setBrush(gradientSelected);
    29. painter->drawRect(r);
    30.  
    31. //BORDER
    32. painter->setPen(lineMarkedPen);
    33. painter->drawLine(r.topLeft(),r.topRight());
    34. painter->drawLine(r.topRight(),r.bottomRight());
    35. painter->drawLine(r.bottomLeft(),r.bottomRight());
    36. painter->drawLine(r.topLeft(),r.bottomLeft());
    37.  
    38. painter->setPen(fontMarkedPen);
    39.  
    40. } else {
    41. //BACKGROUND
    42. //ALTERNATING COLORS
    43. painter->setBrush( (index.row() % 2) ? Qt::white : QColor(252,252,252) );
    44. painter->drawRect(r);
    45.  
    46. //BORDER
    47. painter->setPen(linePen);
    48. painter->drawLine(r.topLeft(),r.topRight());
    49. painter->drawLine(r.topRight(),r.bottomRight());
    50. painter->drawLine(r.bottomLeft(),r.bottomRight());
    51. painter->drawLine(r.topLeft(),r.bottomLeft());
    52.  
    53. painter->setPen(fontPen);
    54. }
    55.  
    56. //GET TITLE, DESCRIPTION AND ICON
    57. QIcon ic = QIcon(qvariant_cast<QPixmap>(index.data(Qt::DecorationRole)));
    58. QString title = index.data(Qt::DisplayRole).toString();
    59. QString description = index.data(Qt::UserRole + 1).toString();
    60.  
    61. int imageSpace = 10;
    62. if (!ic.isNull()) {
    63. //ICON
    64. r = option.rect.adjusted(5, 10, -10, -10);
    65. ic.paint(painter, r, Qt::AlignVCenter|Qt::AlignLeft);
    66. imageSpace = 55;
    67. }
    68.  
    69. //TITLE
    70. r = option.rect.adjusted(imageSpace, 0, -10, -30);
    71. painter->setFont( QFont( "Lucida Grande", 6, QFont::Normal ) );
    72. painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignBottom|Qt::AlignLeft, title, &r);
    73.  
    74. //DESCRIPTION
    75. r = option.rect.adjusted(imageSpace, 30, -10, 0);
    76. painter->setFont( QFont( "Lucida Grande", 5, QFont::Normal ) );
    77. painter->drawText(r.left(), r.top(), r.width(), r.height(), Qt::AlignLeft, description, &r);
    78. }
    79.  
    80. QSize ListDelegate::sizeHint ( const QStyleOptionViewItem & option, const QModelIndex & index ) const{
    81. return QSize(200, 60); // very dumb value
    82. }
    83.  
    84. ListDelegate::~ListDelegate()
    85. {
    86.  
    87. }
    To copy to clipboard, switch view to plain text mode 

  25. The following 7 users say thank you to martinn for this useful post:

    Chromatix (16th September 2014), codeslicer (20th December 2010), fathur_jtk09 (2nd September 2011), m.anis (29th July 2011), sivambigai (7th October 2010), steveyzhang (4th February 2011), sunil304047 (21st December 2011)

Similar Threads

  1. Customize QFileDialog
    By Swankee in forum Newbie
    Replies: 10
    Last Post: 25th November 2009, 21:21
  2. How to customize the icon?
    By snowdream in forum Qt Programming
    Replies: 2
    Last Post: 12th November 2009, 07:59
  3. How customize my .exe with a icon.
    By jiveaxe in forum Qt Programming
    Replies: 2
    Last Post: 30th December 2007, 19:30
  4. how can i customize a QMainWindow
    By wygggyxtf in forum Qt Programming
    Replies: 15
    Last Post: 23rd June 2007, 07:18
  5. How could i customize my QtTabWidget?
    By Rodrigo in forum Qt Programming
    Replies: 3
    Last Post: 29th May 2007, 15:30

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.