QML 基本模型（二）

前言

Repeater元素适合有限的静态数据，但是在真正使用时，模型通常更加复杂和庞大，我们需要一个更加智能的解决方案。QtQuick提供了ListView和GridView元素，这两个都是基于Flickable（可滑动）区域的元素，因此用户可以放入更大的数据。同时，它们限制了同时实例化的代理数量。对于一个大型的模型，这意味着在同一个场景下只会加载有限的元素。

import QtQuick 2.14
import QtQuick.Controls 2.14



ApplicationWindow {
    visible: true
    width: 400
    height: 600
    title: qsTr("Tabs")

    Rectangle {
        anchors.fill: parent
        color: "white"
        ListModel {
            id: theModel
            ListElement { number: 0 }
            ListElement { number: 1 }
        Rectangle {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.margins: 50
            height: 40
            color: "darkGreen"
            Text {
                anchors.centerIn: parent
                text: "Add item!"
            }

            MouseArea {
                anchors.fill: parent
                onClicked: {
                    theModel.append({"number": ++parent.count});
                }
            }

            property int count: 2
        }

        ListView {
            anchors.fill: parent
            anchors.margins: 20
            anchors.bottomMargin: 80
            clip: true
            model: theModel
            width: 45
            height: 45
            delegate: numberDelegate
        }

        Component {
            id: numberDelegate
            Rectangle {
                id: wrapper
                width: 45
                height: 45
                color: "lightGreen"
                Text {
                    anchors.centerIn: parent
                    font.pixelSize: 10
                    text: number
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        if (!wrapper.ListView.delayRemove)
                            theModel.remove(index);
                    }
                }

                ListView.onRemove: SequentialAnimation {
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: true }
                    NumberAnimation { target: wrapper; property: "scale"; to: 0; duration: 250; easing.type: Easing.InOutQuad }
                    PropertyAction { target: wrapper; property: "ListView.delayRemove"; value: false }
                }

                ListView.onAdd: SequentialAnimation {
                    NumberAnimation { target: wrapper; property: "scale"; from: 0; to: 1; duration: 250; easing.type: Easing.InOutQuad }
                }
            }
        }
    }

}

NumberAnimation : 属于动画功能
NumberAnimation {
target: wrapper; 绑定的对象
property: “scale”; 动画的属性， 缩放
from: 0; 开始
to: 1; 结束
duration: 250; 动画时间 250毫秒
easing.type: Easing.InOutQuad 释放类型。
}

参考

https://cwc1987.gitbooks.io/qmlbook-in-chinese/content/model-view-delegate/dynamic_views.html