Qt Documentation

Contents

Animated Windows System-UI Example

How to animate the appearance and disappearance of windows.

The "Animated Windows" example with two applications running.

This example shows you how to animate the appearance and disappearance of windows in a System-UI. It assumes you're already familiar with the concepts and topics introduced in the "Hello World!" System-UI Example.

Unlike our Hello World example, most graphical user interfaces avoid making sudden, abrupt, changes since they can confuse the user and are not visually pleasant. So when a new WindowObject is created by the WindowManager we want to animate its appearance instead of simply having it popping up on the screen. Likewise, once a WindowObject loses its surface (because the application closed this window or stopped altogether) and is thus removed from WindowManager's model we want to animate its disappearance instead of having it vanish immediately.

If you are using a ready-made, advanced, layout such as ListView, you can assign Transitions to different actions like add, remove, displaced, etc and keep using WindowManager as your model. But in many situations this is not the case and thus you will have to create your own separate model (a ListModel should suffice), so that a WindowObject only leaves it once you have finished animating the disappearance of its delegate. This example showcases such a technique.

The windows model

The key point in this example is the model we use for instantiating our windows.

Instead of using WindowManager directly as our model we use a plain ListModel:

    Repeater {
        model: ListModel { id: windowsModel }

        delegate: Rectangle {

We remove a WindowObject from that model only after is has reached its end state (WindowObject.NoSurface) and it's no longer being shown on screen (any state transition has already finished).

            readonly property bool safeToRemove: fullyDisappeared && model.window && model.window.contentState === WindowObject.NoSurface
            onSafeToRemoveChanged: if (safeToRemove) windowsModel.remove(model.index, 1)

And we add a WindowObject to it (and hence have it displayed on screen) as soon as WindowManager creates one.

    Connections {
        target: WindowManager
        onWindowAdded: windowsModel.append({"window":window})
    }

Files:

© 2019 Luxoft Sweden AB. Documentation contributions included herein are the copyrights of their respective owners. The documentation provided herein is licensed under the terms of the GNU Free Documentation License version 1.3 as published by the Free Software Foundation. Qt and respective logos are trademarks of The Qt Company Ltd. in Finland and/or other countries worldwide. All other trademarks are property of their respective owners.