Qt World Summit: Register Today!

Animating Qt widgets? [SOLVED]

  • Hello,

    I would like to animate the Qt widgets in a window.
    Example 1:
    I have a QStackedWidget which contains 10 different pages.
    I want to animate the change of pages in fashionable manner.
    When the user clicks a button, the current page will "slide" to say left and the next page will enter from right side of the window similarly by sliding.
    How do I do this?

    Example 2:
    There are 10X10 child frames in a grid pattern inside a parent frame.
    One of the frame and all its contents disappear upon a SIGNAL, and the animation is such that all the remaining frames adjust to fill the gap.
    How do I do this?

  • Moderators

  • Hey p3c0,

    Thank you very much!
    That is exactly what I was looking for.

    And how do I animate as in case of example 2?
    Is it advisable to use QPropertyAnimation in a similar way or is there a better way?

  • Moderators

    Yes using QPropertyAnimation but could be a bit complicated as filling the gap means you will need to re-adjust the grid which will in turn affect the position/sizes of all the frames in it. But could be a nice challenge accomplishing it.

  • Moderators

    Well, if you are willing to use QML instead then it would be a matter of few lines of code ;)

  • Can I use QML in C++ code?
    If yes then what's the catch ;)

  • Moderators

    Yes you can load QML files in C++ using "QQuickWidet":http://doc.qt.io/qt-5/qquickwidget.html (since Qt 5.3).
    You can find an example on that page on how to load it.
    Now, I don't know what exactly the frames (that you mentioned) are, I can't probably tell much more about how to fit it.
    In QML, "GridView":http://doc.qt.io/qt-5/qml-qtquick-gridview.html can be used for viewing items in grid type. You can pass models, QML based or C++ (which inherits QAbstractItemModel), to GridView which will then display it in that fashion.
    As an example try the following QML code:
    import QtQuick 2.4
    import QtQuick.Controls 1.2

    Rectangle {
    width: 500
    height: 500

    ListModel {
        id: listmodel
    GridView {
        id: grid
        anchors.fill: parent
        model: listmodel
        delegate: Rectangle {
            width: 100
            height: 100
            color: "lightgray"
            border.color: "gray"
            Text {
                text: name;
                anchors.centerIn: parent
        removeDisplaced: Transition {
            NumberAnimation { properties: "x,y"; duration: 500; easing.type: Easing.OutBounce }
    Button {
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom
        text: "Click"
        onClicked: {
            grid.model.remove(Math.floor(Math.random() * grid.model.count) + 0)
    Component.onCompleted: {
        for(var a=0;a<25;a++) {
            listmodel.append({"name": "Item"+a})


    Clicking on button will remove the Items (say frames) randomly and the view automatically gets adjusted.

  • Thank you very much!
    This has been very helpful.

Log in to reply