动画Windows系统UI示例

学习如何使窗口出现和消失的动画。

The Animated Windows example with two applications running.

注意：如果您想在Linux机器上构建此示例，请阅读此内容。

简介

此示例向您展示了如何在系统UI中动画化窗口的出现与消失。

前提条件：您应已熟悉在系统UI示例：“Hello World!”中引入的概念和主题。

与Hello World示例不同，大多数图形用户界面（GUI）避免进行突然的、急剧的变化，因为它们可能会使用户困惑，并且视觉上不愉快。因此，当WindowManager创建一个新的WindowObject时，我们希望动画式地显示其外观，而不是让它在屏幕上突然弹出。同样，一旦WindowObject失去了其表面 - 因为您关闭了此窗口或完全停止了操作 - 并且从WindowManager的模型中删除，我们希望动画化其消失而不是立即消失。

如果您使用的是现成的、高级的布局，例如ListView，您可以为添加、删除、移动等不同动作分配过渡效果，并继续使用WindowManager作为您的模型。但在许多情况下并非如此。相反，您必须创建自己的模型，例如ListModel，以使WindowObject仅在您完成对其代理的消失动画后离开模型。此示例展示了这项技术。

窗口模型

我们在此示例中用于实例化我们的窗口的模型是关键点。

我们不是直接使用WindowManager作为我们的模型，而是使用简单的ListModel

    Repeater {
        model: ListModel { id: windowsModel }

        delegate: Rectangle {

我们仅在WindowObject达到其最终状态：WindowObject.NoSurface并不再显示在屏幕上；任何状态转换都已完成。

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

然后，我们在其中添加一个WindowObject，并在WindowManager创建WindowObject后立即在屏幕上显示它。

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

示例项目 @ code.qt.io