QML中鼠标拖动移动ListView中项的位置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Shado_walker/article/details/77752217

在QML开发中，ListView是我们经常用到的控件，可以用它给用户展示出列表，但是往往都是将项目的显示顺序排好后，直接让ListView显示出来，亦或者是知道要移动到具体的那一位置，然后调整数据在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: "2500"
            manufacturer: "小米公司"
        }
        ListElement{
            name: "苹果"
            cost: "5000"
            manufacturer: "Apple公司"
        }
        ListElement{
            name: "小米2"
            cost: "2000"
            manufacturer: "小米公司"
        }
        ListElement{
            name: "三星"
            cost: "3000"
            manufacturer: "三星公司"
        }
		ListElement{
            name: "华为"
            cost: "3000"
            manufacturer: "华为公司"
        }
		ListElement{
            name: "ViVo"
            cost: "3000"
            manufacturer: "ViVo公司"
        }
    }
    Component {
        id: com_delegate
        Item {
            id: wrapper
            width: parent.width
            height: 30
			Rectangle {
				id: bgColor
				anchors.fill: parent
				color: "transparent"
			}
            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: {
					listview.currentIndex = index;
                }
                onPressed: {
                    bgColor.color = "blue"
                }
                onReleased: {
					bgColor.color = "transparent"
                }
                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.centerIn:parent
		width: 300
		height: 300
        delegate: com_delegate
        model:objmodel
        interactive: false
        focus: true
       function move_down() {
            if( ( n_flag == 0 ) && ( currentIndex+1 ) < 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 == 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()
            }
        }
    }
}

鼠标拖动某项到指定的ListView中的某位置，然后放开鼠标，该项就移动到指定位置了。

左下角的框代表一个按钮（虽然丑了点，说明问题就行^__^）,点击可以改变项的显示位置。

具体的效果图自己脑补，是在不行，直接拷贝以上代码，用qmlscene运行，就可看到效果了。