QML动画添加与移除元素（Animating Added and Removed Items）

code_shenbing

已于 2023-05-13 11:52:58 修改

阅读量257

点赞数 1

分类专栏： QML 文章标签：动画 c++ qt QML

于 2023-05-04 17:13:35 首次发布

本文链接：https://blog.csdn.net/XiaoWang_csdn/article/details/130491120

版权

QML 专栏收录该内容

41 篇文章 8 订阅

订阅专栏

一 QML介绍

二 QML的使用场合

三实例演示

一 QML介绍

QML是Qt Quick的缩写，它是一种新型的、面向对象的、跨平台的脚本语言，可以用来描述用户界面或应用程序的交互逻辑。QML可以在Qt应用程序中使用，也可以在其他JavaScript应用程序中使用。

QML使用XML语法来描述应用程序的用户界面，其中包括各种组件、布局、控件和事件处理程序等。这种语言非常易于学习和使用，因为它具有简单的语法、清晰的结构和易于理解的类型系统。此外，QML还支持自定义组件和自定义控件，使开发人员能够根据需要灵活地设计和重构用户界面。

QML可以帮助开发人员快速构建原生桌面应用程序、移动应用程序和Web应用程序等。由于它是Qt框架的一部分，因此可以利用Qt提供的丰富功能和工具，如Qt Creator、Qt Widgets等。因此，使用QML可以大大提高开发效率和应用程序的质量。

二 QML的使用场合

QML是一种用于描述应用程序用户界面的声明式编程语言，主要应用于移动应用程序、桌面应用程序和Web应用程序等领域。以下是QML主要应用场景：

移动应用程序：QML可以帮助开发人员快速构建原生移动应用程序，如游戏、音乐播放器、地图应用等。由于QML可以将用户界面分解为一个个小的元素，并且可以对这些元素进行美化和自定义，因此非常适合构建移动应用程序。
桌面应用程序：QML可以用于开发桌面应用程序，如窗口管理器、文本编辑器、数据分析工具等。QML可以将界面分解为各个小的部件，并且可以使用Qt提供的各种组件和工具来构建高效的桌面应用程序。
Web应用程序：QML可以用于开发Web应用程序，如网页浏览器、表单验证器、媒体播放器等。由于QML可以将界面分解为小的元素，并且可以使用JavaScript来操作这些元素，因此非常适合构建Web应用程序。

QML是一种非常灵活和易于使用的编程语言，可以帮助开发人员快速构建高效的用户界面，并且可以在不同的应用程序领域中使用。

三实例演示

在某些情况下，视图中的显示内容会随着时间而改变。由于模型数据的改变，元素会添加或者移除。在这些情况下，一个比较好的做法是使用可视化队列给用户一个方向的感觉来帮助用户知道哪些数据被加入或者移除。

为了方便使用，QML视图为每个代理绑定了两个信号，onAdd和onRemove。使用动画连接它们，可以方便创建识别哪些内容被添加或删除的动画。

下面这个例子演示了如何动态填充一个链表模型（ListModel）。在屏幕下方，有一个添加新元素的按钮。当点击它时，会调用模型的append方法来添加一个新的元素。这个操作会触发视图创建一个新的代理，并发送GridView.onAdd信号。SequentialAnimation队列动画与这个信号连接绑定，使用代理的scale属性来放大视图元素。

当视图中的一个代理点击时，将会调用模型的remove方法将一个元素从模型中移除。这个操作将会导致GridView.onRemove信号的发送，触发另一个SequentialAnimation。这时，代理的销毁将会延迟直到动画完成。为了完成这个操作，PropertyAction元素需要在动画前设置GridView.delayRemove属性为true，并在动画后设置为false。这样确保了动画在代理项移除前完成。

1.import QtQuick 2.0
2.
3.Rectangle {
4.    width: 480
5.    height: 300
6.
7.    color: "white"
8.
9.    ListModel {
10.        id: theModel
11.
12.        ListElement { number: 0 }
13.        ListElement { number: 1 }
14.        ListElement { number: 2 }
15.        ListElement { number: 3 }
16.        ListElement { number: 4 }
17.        ListElement { number: 5 }
18.        ListElement { number: 6 }
19.        ListElement { number: 7 }
20.        ListElement { number: 8 }
21.        ListElement { number: 9 }
22.    }
23.
24.    Rectangle {
25.        anchors.left: parent.left
26.        anchors.right: parent.right
27.        anchors.bottom: parent.bottom
28.        anchors.margins: 20
29.
30.        height: 40
31.
32.        color: "darkGreen"
33.
34.        Text {
35.            anchors.centerIn: parent
36.
37.            text: "Add item!"
38.        }
39.
40.        MouseArea {
41.            anchors.fill: parent
42.
43.            onClicked: {
44.                theModel.append({"number": ++parent.count});
45.            }
46.        }
47.
48.        property int count: 9
49.    }
50.
51.    GridView {
52.        anchors.fill: parent
53.        anchors.margins: 20
54.        anchors.bottomMargin: 80
55.
56.        clip: true
57.
58.        model: theModel
59.
60.        cellWidth: 45
61.        cellHeight: 45
62.
63.        delegate: numberDelegate
64.    }
65.
66.    Component {
67.        id: numberDelegate
68.
69.        Rectangle {
70.            id: wrapper
71.
72.            width: 40
73.            height: 40
74.
75.            color: "lightGreen"
76.
77.            Text {
78.                anchors.centerIn: parent
79.
80.                font.pixelSize: 10
81.
82.                text: number
83.            }
84.
85.            MouseArea {
86.                anchors.fill: parent
87.
88.                onClicked: {
89.                    if (!wrapper.GridView.delayRemove)
90.                        theModel.remove(index);
91.                }
92.            }
93.
94.            GridView.onRemove: SequentialAnimation {
95.                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: true }
96.                NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
97.                PropertyAction { target: wrapper; property: "GridView.delayRemove"; value: false }
98.            }
99.
100.            GridView.onAdd: SequentialAnimation {
101.                NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }
102.            }
103.        }
104.    }
105.}