Qt Quick之ListView单元的上下拖动功能实现

       最近在项目中用到了ListView中单元的上下拖动功能，由于在网上找这方面的资料不是太多，所以这里将实现方法记录下来。实现方法：使用onMouseXChanged、onMouseYChanged两个函数来得到该区域内x,y变化后的坐标值，并在里面通过listview.indexAt()函数计算得到索引值index，最后使用move函数来移动listview显示单元。这里提供了一个简单的listview实例，并搭配上了移动时的动画效果，感觉还行。参考程序如下。

参考程序：

import QtQuick 2.4
import QtQuick.Controls 1.3
import QtQuick.Window 2.2
import QtQuick.Dialogs 1.2

Rectangle {
    width: 800
    height: 600

    ListModel{
        id: objmodel
        ListElement{
            name: "苹果"
            cost: "5000"
            manufacturer: "Apple公司"
        }
        ListElement{
            name: "小米2"
            cost: "2000"
            manufacturer: "小米公司"
        }
        ListElement{
            name: "三星"
            cost: "3000"
            manufacturer: "三星公司"
        }
    }

    Component {
        id: phone_delegate
        Item {
            id: wrapper
            width: parent.width
            height: 30
            Row{
                anchors.left: parent.left
                anchors.verticalCenter: parent.verticalCenter
                spacing: 8
                Text {
                    id: coll
                    text: name
                    color: wrapper.ListView.isCurrentItem? "red":"black"
                    font.pixelSize: 20
                }
                Text {
                    text: cost
                    color: wrapper.ListView.isCurrentItem? "red":"black"
                    font.pixelSize: 20
                }
                Text {
                    text: manufacturer
                    color: wrapper.ListView.isCurrentItem? "red":"black"
                    font.pixelSize: 20
                }

            }
            MouseArea {
                id: mousearea
                anchors.fill: parent
                onClicked: {
                }
                onPressed: {
                   
                }
                onReleased: {
                 
                }
                onMouseXChanged: {
                        var pore = listview.indexAt( mousearea.mouseX + wrapper.x, mousearea.mouseY + wrapper.y );
                        if( index != pore ) {
                            objmodel.move( index, pore , 1)
                     }
                }
                onMouseYChanged: {
                       var pore = listview.indexAt( mousearea.mouseX + wrapper.x, mousearea.mouseY + wrapper.y );
                       if( index != pore ) {
                           objmodel.move( index, pore , 1)
                        }
                }
            }
        }

    }

    property int n_flag: 0
    ListView {
        id: listview
        anchors.fill: parent
        delegate: phone_delegate
        model:objmodel
        interactive: false
        focus: true

       function move_down() {
            if( ( n_flag == 0 ) && ( currentIndex+1 ) < second_model.count ) {
                model.move( currentIndex, currentIndex+1, 1)
            }
            if( n_flag == 1 && ( currentIndex-1 ) >= 0) {
                model.move( currentIndex, currentIndex-1, 1)
            }
            if( currentIndex -1 == 0 ) {
                n_flag = 0;
            }
            if( currentIndex + 1 == second_model.count ) {
                n_flag = 1
            }
        }

        move: Transition {
                NumberAnimation { properties: "x,y"; duration: 100 }
        }
    }
    Rectangle {
        anchors.bottom: parent.bottom
        width: 100
        height: 100
        border.width: 0.6
        MouseArea {
            anchors.fill: parent
            onClicked: {
                console.log( listview.currentIndex )
                listview.move_down()
            }
        }

    }
}