How to implement QListWidget slide animation

up vote1down votefavorite

share [fb]share [tw]

I'm working on an application that needs to have a menu on the left side of the screen containing multiple items (text). The only items I want to be visible are the actual text and the highlight bar. I would also like to modify the highlight bar so that: a. I can animate it, and slide it from one selection to the next b. I can use a custom pixmap with rounded corners instead of the default highlight color

I've tried using a QListWidget and stylesheets and had some success, but I don't believe it's possible to round the corners of my highlight bar using this method. I'm also not sure I can animate the movement of the bar from one item to the next:

preset_list_view->setStyleSheet("QListView {color: rgb(230, 230, 230); background-color: rgba(0,0,0,0); border-style: none} QListView::item:selected {background-image: url(:/ui_resources/elements-preset_select/highlight_bar_270x30-black_bg.bmp)}");

I've looked all over online and not found much. There is some mention of modifying the delegate of the QListWidget, but the descriptions have been vague. I'm also not sure if this would solve my animation problem.

Any ideas?

qt qlistwidget

link|improve this question

asked Sep 1 at 18:31 Marlon Smith 395 44% accept rate

There is something close to what you want in the QML examples (QtSDK/Examples/4.7/declarative/modelviews/listview/highlightranges/qml/highligh??tranges.qml, that you run withqmlviewer). Basically it's a list with a animated transparent selection indicator which moves smoothly. – alexisdm Sep 14 at 2:19

Was this post useful to you?     

2 Answers

activeoldestvotes

up vote2down vote

You can place a semi transparent inert widget on top of the QListWidget, and animate it when the selection changes. But you also need a delegate to disable the normal selection indicator.

A working example:

#include <QListWidget>
#include <QFrame>
#include <QPropertyAnimation>
#include <QStyledItemDelegate>

class RemoveSelectionDelegate : public QStyledItemDelegate {
public:
    RemoveSelectionDelegate(QObject *parent = 0)
        : QStyledItemDelegate(parent) {
    }

    void paint(QPainter *painter, const QStyleOptionViewItem &option,
               const QModelIndex &index) const {
        // Call the original paint method with the selection state cleared
        // to prevent painting the original selection background
        QStyleOptionViewItemV4 optionV4 =
            *qstyleoption_cast<const QStyleOptionViewItemV4 *>(&option);
        optionV4.state &= ~QStyle::State_Selected;
        QStyledItemDelegate::paint(painter, optionV4, index);
    }
};

class ListWidget : public QListWidget {
    Q_OBJECT
public:
    ListWidget(QWidget *parent = 0)
        : QListWidget(parent)
        , selectionFrame(this)
        , animation(&selectionFrame, "geometry") {
        // Create a semi-transparent frame that doesn't interact with anything
        selectionFrame.setAttribute(Qt::WA_TransparentForMouseEvents);
        selectionFrame.setFocusPolicy(Qt::NoFocus);

        // You can put your transparent image in that stylesheet
        selectionFrame.setStyleSheet("background: solid rgba(0, 0, 125, 25%);");
        selectionFrame.hide();
        animation.setDuration(250);
        animation.setEasingCurve(QEasingCurve::InOutBack);

        connect(this,
                SIGNAL(currentItemChanged(QListWidgetItem*, QListWidgetItem*)),
                SLOT(updateSelection(QListWidgetItem*)) );        
        setItemDelegate(new RemoveSelectionDelegate(this));
    }

private slots:
    void resizeEvent(QResizeEvent *e) {
        QListWidget::resizeEvent(e);
        updateSelection(currentItem());
    }

    void updateSelection(QListWidgetItem* current) {
        animation.stop();
        if (!current) {
            selectionFrame.hide();
            return;
        }
        if (!selectionFrame.isVisible()) {
            selectionFrame.setGeometry(visualItemRect(current));
            selectionFrame.show();
            return;
        }
        animation.setStartValue(selectionFrame.geometry());
        animation.setEndValue(visualItemRect(current));
        animation.start();
    }
private:
    QFrame selectionFrame;
    QPropertyAnimation animation;
};

link|improve this answer

edited Sep 2 at 0:57

answered Sep 1 at 22:30 alexisdm 3,222210

Thanks alexisdm, I will give that a go (after I spend a few minutes trying to wrap my head around it!). I'm a little disappointed that Qt hasn't provided this functionality in an easier way, although who am I to complain too much about completely free software? – Marlon Smith Sep 2 at 17:07

feedback

up vote1down vote

So if its just text then why not have a QDockwidget with QLabels.

For example, take a look at the 'Qt Designer's 'Widget Box' on the left, you can drag that and place it on the top. Is that what you are looking for?

You can move the dockwidget as you want.

link|improve this answer

answered Sep 1 at 19:03 blueskin 1,396210

	That's not a terrible idea, although I should have mentioned that I need to be able to easily add/remove items from the list, and it needs to be scrollable, as well as emitting a signal when an item is selected. I also need to be able to select the next or previous item in the menu when I receive a signal (from a hardware button). A QListWidget nicely includes all this functionality, so it seemed easiest to just modify it for what I need. – Marlon Smith Sep 1 at 20:23
	Do you have an example or an image of what your are trying to achieve? – blueskin Sep 1 at 20:49
	Hi blueskin, I don't think I'm able to provide an actual image of what I'm doing since it's for a client (although I believe it is going to be open source in the future). Picture a QListBox where the only things visible are the items in the list, the selection bar is a custom bitmap, and the selection bar slides from one item to the next. If the number of items exceeds the size of the screen, the list will scroll as the selected item changes. – Marlon Smith Sep 2 at 17:02
	I mean QListWidget, not QListBox. – Marlon Smith Sep 2 at 17:08
	ok then basically you cant create a widget that animates and does all the stuff you want and put it in the list widget using setItemWidget. doc.qt.nokia.com/latest/qlistwidget.html#setItemWidget – blueskin Sep 2 at 18:46