QListView : Increasing the cell width and height



  • Hi

    I'm using the QListView. Each element of the list view is displaying the ICON and Text. We don't have any issue in using it.

    When the item is selected using up and down arrow keys, I would like to increase the ICON size and Text font size for selected item. How can we do this ? Any hints or sample program ?


  • Qt Champions 2016

    Hi
    I had no luck changing the font size using a style sheet so I ended up
    making a delegate
    You can then draw the selected row your self using bigger font and icon.

    class TestDelegate : public QStyledItemDelegate
    {
    public:
    TestDelegate(QObject* parent = 0);

    protected:
    virtual void paint(QPainter *painter, const QStyleOptionViewItem &option, const QModelIndex &index) const;
    QSize sizeHint ( const QStyleOptionViewItem& option, const QModelIndex& index ) const;

    };



  • Thank you. Yes delegate is the options. How do you force the redraw when the particular row is selected ? I would like to increase the font and icon size only for the row selected. Other rows(non-selected) rows should remain as is. When the new row is selected, previous selected row should be unselected as well.


  • Qt Champions 2016

    @dheerendra
    Hi
    You do not need to force it to redraw as it will when you move to it or click it.

    You can try this code for test
    it gets you this
    http://postimg.org/image/llsmepjhj/
    (update: drawn center)
    Note: the icon can only scale to how large it really is. (it seems)
    So a 60x60 image will max give you 60x60. So if your icon is still small when row is selected, image/icon need to be bigger.
    The icon in the sample are inserted with setIcon for the listviewitem. Not sure how you put icons in.

    I suspect one can do it smarter using style->drawControl and change stuff in option but never really did dig into that.

    void TestDelegate::paint ( QPainter *painter, const QStyleOptionViewItem& option, const QModelIndex& index ) const
    {
    
        QStyle* style = option.widget ? option.widget->style() : QApplication::style();
        QRect rect = option.rect;
    
        QString thetext = index.model()->data ( index.model()->index ( index.row(), 0 ) ).toString();
    
        if ( option.state & QStyle::State_Selected ) {
            painter->save();
            // draw selection rext
            style->drawControl ( QStyle::CE_ItemViewItem, &option, painter, option.widget );
            // get icon and scale it
            QIcon icon = qvariant_cast<QIcon> ( index.model()->data ( index, Qt::DecorationRole ) );
            //scale it . note must be big enough or you get a smaller
            QSize mysize = option.decorationSize;
            mysize.scale ( mysize.width() + 10, mysize.width() + 10, Qt::KeepAspectRatio );
            QPixmap iconPixmap = icon.pixmap ( mysize );
            //draw icon
            painter->drawPixmap (  option.rect.x() , option.rect.center().y() - mysize.height()/2 , iconPixmap  );        
            // Change font
            QFont font = option.font;
            font.setPointSize ( option.font.pointSize() + 10 );
            painter->setFont ( font );
            // adjust text to after image
            QRect textrect = option.rect;
            textrect.setLeft ( textrect.left() + mysize.width() );
            painter->drawText ( textrect , Qt::AlignLeft | Qt::AlignVCenter, thetext );
            painter->restore();
        } else {
            QStyledItemDelegate::paint ( painter, option, index );
        }
    
    }
    
    QSize TestDelegate::sizeHint ( const QStyleOptionViewItem& option, const QModelIndex& index ) const
    {
        QSize result = QStyledItemDelegate::sizeHint ( option, index );
        result.setHeight ( result.height() * 2 ); 
        return result;
    }
    


  • @mrjj said:

    QStyle* style = option.widget ? option.widget->style() : QApplication::style();
    QRect rect = option.rect;

    QString thetext = index.model()->data ( index.model()->index ( index.row(), 0 ) ).toString();
    
    if ( option.state & QStyle::State_Selected ) {
        painter->save();
        // draw selection rext
        style->drawControl ( QStyle::CE_ItemViewItem, &option, painter, option.widget );
        // get icon and scale it
        QIcon icon = qvariant_cast<QIcon> ( index.model()->data ( index, Qt::DecorationRole ) );
        //scale it . note must be big enough or you get a smaller
        QSize mysize = option.decorationSize;
        mysize.scale ( mysize.width() + 10, mysize.width() + 10, Qt::KeepAspectRatio );
        QPixmap iconPixmap = icon.pixmap ( mysize );
        //draw icon
        painter->drawPixmap (  option.rect.x() , option.rect.center().y() - mysize.height()/2 , iconPixmap  );        
        // Change font
        QFont font = option.font;
        font.setPointSize ( option.font.pointSize() + 10 );
        painter->setFont ( font );
        // adjust text to after image
        QRect textrect = option.rect;
        textrect.setLeft ( textrect.left() + mysize.width() );
        painter->drawText ( textrect , Qt::AlignLeft | Qt::AlignVCenter, thetext );
        painter->restore();
    } else {
        QStyledItemDelegate::paint ( painter, option, index );
    }
    

    }

    QSize TestDelegate::sizeHint ( const QStyleOptionViewItem& option, const QModelIndex& index ) const
    {
    QSize result = QStyledItemDelegate::sizeHint ( option, index );
    result.setHeight ( result.height() * 2 );
    return result;
    }

    Thank you. This helps. I appreciate your help.


  • Qt Champions 2016

    @dheerendra
    You are most welcome.
    Bear in mind that you might need to support a few more type of drawing if it must support states like
    disabled. Also, it does not work with styles/stylesheets without a bit of tweaking.


Log in to reply
 

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