QML学习一、GridView的使用和增加添加动画、删除动画

一、效果预览

二、源码分享

import QtQuick
import QtQuick.Controls

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: "Test"
    property int cnt:cnt = model.count
    ListModel{
        id:model
        ListElement{index:0}
        ListElement{index:1}
        ListElement{index:2}
        ListElement{index:3}
    }

    GridView{
        id:gridView
        anchors.fill: parent
        model: model
        cellWidth: 50
        cellHeight: 50
        anchors.margins: 20
        delegate: delegateModel
        onAddChanged: console.log("add")
    }
    Component{
        id:delegateModel
        Rectangle{
            id:wapper
            width: 40
            height: 40
            color: "red"
            required property int index
            Text {
                anchors.fill: parent
                text: index
                horizontalAlignment: Text.AlignHCenter
                verticalAlignment: Text.AlignVCenter
                font{
                    pixelSize: 16
                    bold:true
                }
            }
            GridView.onAdd:{
                console.log("add")
                addAnim.start()
            }
            GridView.onRemove:{
                console.log("remove")
                removeAnim.start()
            }
            ScaleAnimator{
                id:addAnim
                target: wapper
                from:0
                to:1
                duration: 200
            }
            SequentialAnimation{
                id:removeAnim
                PropertyAction{
                    target: wapper
                    property: "GridView.delayRemove"
                    value:true

                }

                ScaleAnimator{

                    target: wapper
                    from:1
                    to:0
                    duration: 200
                }
                PropertyAction{
                    target: wapper
                    property: "GridView.delayRemove"
                    value:false

                }
            }


            MouseArea{
                anchors.fill: parent
                onClicked: {
                    model.remove(index)
                    cnt--
                }
            }
        }

    }
    Button{
        anchors.bottom: parent.bottom
        width: parent.width
        height: 40
        onClicked: {
            var data = {index:cnt}
            model.append(data)
            cnt++
        }
    }

}

三、源码解析

1、添加动画

GridView.onAdd:{
                console.log("add")
                addAnim.start()
            }
ScaleAnimator{
         id:addAnim
         target: wapper
         from:0
         to:1
         duration: 200
     }

2、删除动画

GridView.onRemove:{
      console.log("remove")
      removeAnim.start()
  }
  SequentialAnimation{
      id:removeAnim
      PropertyAction{
          target: wapper
          property: "GridView.delayRemove"
          value:true

      }
      ScaleAnimator{

          target: wapper
          from:1
          to:0
          duration: 200
      }
      PropertyAction{
          target: wapper
          property: "GridView.delayRemove"
          value:false

      }
  }

删除动画尤为重要，要按照这个格式设置才行，否则无效果。