Qt qml ListView 动画

Qt qml ListView 动画

import QtQuick 2.0

Item {
    ListView{
        id: view
        anchors.fill: parent
        clip: true
        focus: true

        populate: Transition{
            NumberAnimation{
                properties: "x,y"
                duration: 300
            }
        }

        add: Transition{
            PropertyAction{
                property: "transformOrigin"
                value: Item.TopLeft
            }
            NumberAnimation{
                property: "opacity";
                from: 0
                to: 1.0
                duration: 200
            }
            NumberAnimation{
                property: "scale";
                from: 0
                to: 1.0
                duration: 200
            }
        }

        displaced: Transition{
            PropertyAction{properties: "opacity, scale"; value: 1}
            NumberAnimation{properties: "x,y"; duration: 200}
        }

        property var collapsed: ({})

        model: NameModel{
            id: nameModel
        }
        delegate: NameDelegate{
            readonly property ListView __lv: ListView.view

            anchors{
                left: parent.left
                leftMargin: 2

                right: parent.right
                rightMargin: 2
            }

            expended: __lv.isSectionExpanded( model.team )

            MouseArea{
                anchors.fill: parent
                onClicked: {
                    console.log("Current index: ", index)
                    nameModel.insert(index, {name: "Item #" + nameModel.count, team: "Crypto"})
                }
            }
        }

        highlight: HighlightDelegate{
            width: parent.width
            anchors{
                left: parent.left
                right: parent.right
            }
        }

        section{
            property: "team"
            criteria: ViewSection.FullString

            delegate: SectionDelegate{
                anchors{
                    left: parent.left
                    right: parent.right
                }
                text: section
                onClicked: view.toggleSection(section)
            }
        }

        function isSectionExpanded(section){
            return !(section in collapsed)
        }

        function showSection(section){
            delete collapsed[section]
            /*emit*/ collapsedChanged();
        }

        function hideSection(section){
            collapsed[section] = true
            /*emit*/ collapsedChanged();
        }

        function toggleSection(section){
            if(isSectionExpanded(section)){
                hideSection(section)
            }else{
                showSection(section)
            }
        }
    }
}