QListView : Increasing the cell width and height

dheerendra

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 ?

mrjj

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;

};

dheerendra

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.

mrjj

@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;
}

dheerendra

@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.

mrjj

@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.