qml----Model/View入门ListView动画效果

Posted 2020-10-19 Qt王二狗

在上一节中，我们实现了listview的基本功能以及对数据的操作，这节我们来讲如何添加动画效果

代码如下，效果直接运行即可看到

import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Layouts 1.1

Rectangle {
    width: 360
    height: 300
    color: "#EEEEEE"

    Component{
        id: phoneModel

        ListModel{
            ListElement{
                name: "iphone5"
                cost: "4900"
                manufacture: "Apple"
            }

            ListElement{
                name: "Bl99"
                cost: "1590"
                manufacture: "HuaWei"
            }

            ListElement{
                name: "MI 2S"
                cost: "1900"
                manufacture: "xiaomi"
            }

            ListElement{
                name: "galaxy s6"
                cost: "4900"
                manufacture: "samsung"
            }
        }
    }// iphoneModel is end

    Component{
        id: headView

        Item{
            width: parent.width
            height: 30

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    text: "Name"
                    font.bold: true
                    font.pixelSize: 20
                    Layout.preferredWidth: 120
                }

                Text{
                    text: "Cost"
                    font.pixelSize: 20
                    font.bold: true
                    Layout.preferredWidth: 120
                }

                Text{
                    text: "Manufacture"
                    font.pixelSize: 20
                    font.bold: true
                    Layout.fillWidth: true
                }
            }
        }
    }// headView is end

    Component{
        id: footerView

        Item {
            id: footerRootItem
            width: parent.width
            height: 30
            signal add()
            signal insert()

            Button{
                id: addOne
                anchors.right: parent.right
                anchors.rightMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: "Add"
                onClicked: footerRootItem.add()
            }

            Button{
                id: insertOne
                anchors.right: addOne.left
                anchors.leftMargin: 4
                anchors.verticalCenter: parent.verticalCenter
                text: "Insert"
                onClicked: footerRootItem.insert()
            }
        }
    }//footView is end

    Component{
        id: phoneDelegate

        Item{
            id: wrapper
            width: parent.width
            height: 30

            RowLayout{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text{
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 120
                }

                Text{
                    text: cost
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.preferredWidth: 80
                }

                Text{
                    text: manufacture
                    color: wrapper.ListView.isCurrentItem ? "red" : "black"
                    font.pixelSize: wrapper.ListView.isCurrentItem ? 22 : 18
                    Layout.fillWidth: true
                }
            }

            MouseArea{
                anchors.fill: parent

                onClicked: {
                    wrapper.ListView.view.currentIndex = index
                    mouse.accepted = true
                }

                onDoubleClicked: {
                    wrapper.ListView.view.model.remove(index)
                    mouse.accepted = true
                }
            }
        }
    }//phoneDelegate is end

    ListView{
        id: listView
        anchors.fill: parent
        delegate: phoneDelegate
        model: phoneModel.createObject(listView)
        header: headView
        footer: footerView
        focus: true
        highlight: Rectangle{
            color: "lightblue"
        }

        /*  populate
         *  populate指定一个过度动画，在listView第一次实例化或者因为Model变化而需要创建Item时应用
         *  下面就是产生一个渐变效果
         */
        populate: Transition{
            NumberAnimation{
                property: "opacity"
                from: 0
                to: 1.0
                duration: 1000
            }
        }//populate Transition is end

        add:Transition {
            ParallelAnimation{
                NumberAnimation{
                    property: "opacity"
                    from: 0
                    to : 1.0
                    duration: 1000
                }

                NumberAnimation{
                    property: "y"
                    from: 0
                    duration:  1000
                }
            }
        }// add transition is end

        /*  displaced属性
         *  此属性用于指定通用的、由于model变化导致Item位移时的动画效果，还有removeDisplaced、moveDisplaced
         *  如果同时指定了displaced 和xxxDisplaced,那么xxxDisplaced生效
         */
        displaced: Transition {
            SpringAnimation{
                property: "y"
                spring: 3
                damping: 0.1
                epsilon: 0.25
            }
        }

        remove: Transition {
            SequentialAnimation{
                NumberAnimation{
                    property: "y"
                    to: 0
                    duration: 600
                }

                NumberAnimation{
                    property: "opacity"
                    to:0
                    duration: 600
                }
            }
        }//remove Transition is end


        function addOne()
        {
            model.append(
                {
                    "name": "MX5",
                    "cost": "1899",
                    "manufacture" : "MeiZu"
                }
            )
        }

        function insertOne()
        {
            model.insert(Math.round(Math.random() * model.count),
               {
                    "name" : "HTC One E8",
                    "cost" : "2900",
                    "manufacture" : "HTC"
               }
            )
        }

        Component.onCompleted: {
            listView.footerItem.add.connect(listView.addOne)
            listView.footerItem.insert.connect(listView.insertOne)
        }
    }
}