在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运行,就可看到效果了。