[SOLVED]How to display two icons in a row in QTreeView



  • Hi,

    I want to display two icons in tree view one left side of text & other one in right side of icon in a row. So can anyone suggest me(any example) how to do so?



  • Create a custom delegate to do the rendering of your cells.



  • Can please give me some more information how to use custom delegate with QTreeView , because i am newbie in qt. one more thing i am using Christophe Dumez blog("http://cdumez.blogspot.in/2010/11/how-to-use-c-list-model-in-qml.html") as my model.



  • -Let me move this to the Quick forum. QML is very different in this respect than Qt/Widgets.-

    Actually, let's keep it here. The problem is, the blog you mention is about QML, so I figured you're using QML too. But, you are talking about QTreeView, and that is a Qt/Widgets class of which there is no QML equivalent.

    So please tell us: which technology are you using?



  • I am developing my application in qt 4.7 & MY MODEL IS QAbstractmodel.



  • Ok, so forget about that blog you referenced. It is about using QML, which you are not using.

    In that case, refer back to my first answer: you are going to need a custom delegate to manually do your rendering. There is no easy, pre-defined way to put multiple images in a single cell.



  • There could be another way:

    If you have a custom model, you can combine the icons into one there and return the combined one by data...



  • [quote author="Gerolf" date="1360063388"]There could be another way:

    If you have a custom model, you can combine the icons into one there and return the combined one by data...[/quote]

    Might be difficult if you want one on the left side, and one on the right side, I think?



  • Can you provide me some code for custom delegate please



  • I could, but I won't. I'm willing to give you pointers in the right direction, but not give you ready-made code that you won't learn a thing from. I'd look at [[doc:QItemDelegate]] or [[doc:QStyledItemDelegate]] as your starting point.



  • Thank you for your guidance. i have started to learn "QItemDelegate"



  • I am not getting any idea about two icons in row, because when i try to find some example there is only for editor e.g.(http://qt-project.org/doc/qt-4.8/itemviews-stardelegate.html".
    Can i see the default delegate implementaion for QTreeView



  • Hi,
    i am using QItemDelegates paint method for custom delegate. My code is as following

    .h file
    @#include <QItemDelegate>
    #include <QModelIndex>
    #include <QObject>
    #include <QSize>
    #include <QSpinBox>

    class TreeViewItemDelegate : public QItemDelegate
    {
    Q_OBJECT

    public:
    TreeViewItemDelegate(QObject *parent = 0);

    void paint( QPainter * painter,
                const QStyleOptionViewItem & option,
                const QModelIndex & index ) const;
    

    };
    @

    .cpp file
    @TreeViewItemDelegate::TreeViewItemDelegate(QObject *parent)
    : QItemDelegate(parent)
    {
    }

    void TreeViewItemDelegate ::paint( QPainter * painter,
    const QStyleOptionViewItem & option,
    const QModelIndex & index ) const
    {
    QString contactURI = index.model()->data(index, Qt::DisplayRole).toString();
    QIcon icon = qvariant_cast<QIcon>(index.model()->data(index, Qt::DecorationRole));
    QIcon icon2 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+5));

    QPixmap iconPixmap = icon.pixmap(option.decorationSize);
    QPixmap iconPixmap2 = icon2.pixmap(option.decorationSize);
    
    QStyleOptionViewItem myoption = option;
    QStyleOptionViewItem myoption2 = option;
    QStyleOptionViewItem myoption3 = option;
    myoption.displayAlignment = Qt::AlignCenter;
    myoption2.decorationAlignment = Qt::AlignLeft;
    myoption3.decorationAlignment = Qt::AlignRight;
    
    drawBackground(painter, myoption, index);
    drawDecoration(painter, myoption, myoption2.rect, iconPixmap);
    drawDisplay(painter,myoption, myoption.rect, contactURI);
    drawDecoration(painter, myoption, myoption3.rect, iconPixmap2);
    drawFocus(painter, myoption,myoption.rect);
    

    }
    @

    There is on problem that only one icon is displaying. I know i am doing something wrong, so can anyone help me to correct this code to display both icon??



  • There is full code to display two icons in a row

    addressBookItemDelegate.h

    @class TreeViewItemDelegate : public QItemDelegate
    {
    Q_OBJECT

    public:
    TreeViewItemDelegate(QObject *parent = 0);

    void paint( QPainter * painter,
                const QStyleOptionViewItem & option,
                const QModelIndex & index ) const;
    QRect calcDecorationRect(QRect rect, int horizontalAlignment, int verticalAlignment ) const;
    QRect calcDisplayRect(QRect rect, int horizontalAlignment) const;
    

    };
    @

    addressBookItemDelegate.cpp
    @
    #include "addressBookItemDelegate.h"
    #include <QDebug>
    #include <QDecoration>
    #include <QPainter>

    TreeViewItemDelegate::TreeViewItemDelegate(QObject *parent)
    : QItemDelegate(parent)
    {
    }

    void TreeViewItemDelegate ::paint( QPainter * painter,
    const QStyleOptionViewItem & option,
    const QModelIndex & index ) const
    {
    QString contactURI = index.model()->data(index, Qt::DisplayRole).toString();
    QIcon icon = qvariant_cast<QIcon>(index.model()->data(index, Qt::DecorationRole));
    QIcon icon2 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+5));
    QIcon icon3 = qvariant_cast<QIcon>(index.model()->data(index, Qt::UserRole+6));
    QString freeText = index.model()->data(index, Qt::UserRole+2).toString();

    QPixmap iconPixmap = icon.pixmap(option.decorationSize);
    QPixmap iconPixmap2 = icon2.pixmap((option.decorationSize/3)*2);
    QPixmap iconPixmap3 = icon3.pixmap((option.decorationSize/3)*2);
    
    QStyleOptionViewItem myoption =  option;
    
    
    QRect rect1 = this->calcDecorationRect(option.rect, Qt::AlignLeft, Qt::AlignTop);
    QRect rect2 = this->calcDecorationRect(option.rect, Qt::AlignRight, Qt::AlignTop);
    

    // QRect rect3 = this->calcDecorationRect(option.rect, Qt::AlignLeft, Qt::AlignBottom);
    QRect rect4 = this->calcDecorationRect(option.rect, Qt::AlignRight, Qt::AlignBottom);

    QRect displayRect = this->calcDisplayRect(option.rect, Qt::AlignTop);
    QRect freeTextRect = this->calcDisplayRect(option.rect, Qt::AlignBottom);
    
    drawBackground(painter, myoption, index);
    drawDecoration(painter, myoption, rect1, iconPixmap);
    drawDisplay(painter,myoption, displayRect, contactURI);
    drawDisplay(painter,myoption, freeTextRect, freeText);
    drawDecoration(painter, myoption, rect2, iconPixmap2);
    //drawDecoration(painter, myoption, rect3, iconPixmap2);
    drawDecoration(painter, myoption, rect4, iconPixmap3);
    drawFocus(painter, myoption,option.rect);
    

    }
    QRect TreeViewItemDelegate :: calcDecorationRect(QRect mainRect, int horizontalAlignment, int verticalAlignment) const
    {
    QRect rect;

    if(horizontalAlignment == Qt::AlignLeft)
    {
        if(verticalAlignment == Qt::AlignTop)
        {
            rect.setX(mainRect.x()+2);
            rect.setY(mainRect.y()+2);
            rect.setWidth(mainRect.width()/8);
            rect.setHeight((mainRect.height()/3)*2);
        }
    

    // else if(verticalAlignment == Qt::AlignBottom)
    // {
    // rect.setX(mainRect.x()+ 2);
    // rect.setY(mainRect.y()+ (mainRect.height()/3)*2 - 2);
    // rect.setWidth(mainRect.width()/8);
    // rect.setHeight(mainRect.height()/3);
    // }
    }
    if(horizontalAlignment == Qt::AlignRight)
    {
    if(verticalAlignment == Qt::AlignTop)
    {
    rect.setX(mainRect.x() + (mainRect.width()/8)*7 - 2);
    rect.setY(mainRect.y() + 2);
    rect.setWidth(mainRect.width()/8);
    rect.setHeight(mainRect.height()/3);
    }
    else if(verticalAlignment == Qt::AlignBottom)
    {
    rect.setX(mainRect.x() + (mainRect.width()/8)*7 - 2);
    rect.setY(mainRect.y()+ (mainRect.height()/3)*2 - 2);
    rect.setWidth(mainRect.width()/8);
    rect.setHeight(mainRect.height()/3);
    }
    }
    return rect;
    }
    QRect TreeViewItemDelegate :: calcDisplayRect(QRect mainRect, int verticalAlignment) const
    {

    QRect rect;
    if(verticalAlignment == Qt::AlignTop)
    {
        rect.setX(mainRect.x() + mainRect.width()/8 + 3 );
        rect.setY(mainRect.y() + 2);
        rect.setHeight(mainRect.height()/2 - 2);
        rect.setWidth(mainRect.width() - 2*(mainRect.width()/8));
    }
    else if(verticalAlignment == Qt::AlignBottom)
    {
        rect.setX(mainRect.x() + mainRect.width()/8 + 3 );
        rect.setY(mainRect.y() + 2 + mainRect.height()/2);
        rect.setHeight(mainRect.height()/2 - 2);
        rect.setWidth(mainRect.width() - 2*(mainRect.width()/8));
    }
    
    
    return rect;
    

    }
    @


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.