Question

假设一个QML应用程序有两个列表模型，每个模型包含3个项目。图形上，两个列表显示在两个容器中。我想实现拖放功能，对列表中的项目进行重新排序，并在不同列表之间交换两个项目。

由于move的{{1}}方法，在一个列表中重新排序不会产生任何问题。但是，对于在两个列表模型之间交换项目，我认为我必须使用ListModel的{{1}}和remove或insert操作。使用set的首次实验无效。

实现此目的的规范方法是什么，也适用于转换？（例如，交换项目＆＃39;角色是没有解决方案的，我将不得不自己交换项目。）

Answer 1

您可以使用ListModel.get()从一个视图中获取元素，并使用ListModel.append()或ListModel.insert()将其放入另一个视图中（不完全使用相同类型）

简单的例子：

import QtQuick 2.4
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1
import QtQuick.Controls 1.4

Window {
    width: 400
    height: 400
    visible: true

    Component.onCompleted: {
        fillModel(model1);
        fillModel(model2);
    }

    Component {
        id: delegate
        Rectangle {
            width: parent.width
            property int itemIndex: index
            property var view: ListView.view
            color: (itemIndex === view.currentIndex) ? "orange" : "white"
            height: 20
            Text { text: name; color: moved ? "red" : "black"; anchors.centerIn: parent }
            MouseArea {
                anchors.fill: parent
                onClicked: {
                    view.currentIndex = itemIndex;
                }
            }
        }
    }

    RowLayout {
        anchors.fill: parent
        ListView {
            id: list1
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: ListModel { id: model1 }
            delegate: delegate
        }
        ColumnLayout {
            Layout.alignment: Qt.AlignCenter
            width: 50
            Button { text: ">>>"; onClicked: moveItem(list1,list2) }
            Button { text: "<<<"; onClicked: moveItem(list2,list1) }
        }
        ListView {
            id: list2
            Layout.fillHeight: true
            Layout.fillWidth: true
            model: ListModel { id: model2 }
            delegate: delegate
            add: Transition {
                id: list2Transition
                enabled: false
                property int fromX
                property int fromY
                ParallelAnimation {
                    NumberAnimation { properties: "x"; from: list2Transition.fromX; duration: 300;  }
                    NumberAnimation { properties: "y"; from: list2Transition.fromY; duration: 300;easing.type: Easing.OutCirc;  }
                    PropertyAnimation {property: "color"; from: "red"; to: "white"; duration: 500 }
                }
            }
        }
    }

    function fillModel(model) {
        for(var i = 0;i < 15;i ++)
            model.append({name: "item" + i, moved: false});
    }
    function moveItem(listfrom,listto) {
        var item = listfrom.model.get(listfrom.currentIndex);
        var newPos1 = listfrom.parent.mapFromItem(listfrom,0,listfrom.currentIndex * 20);
        var newPos2 = listto.parent.mapFromItem(listto,0,listto.currentIndex * 20);
        list2Transition.fromX = newPos1.x - newPos2.x;
        list2Transition.fromY = newPos1.y;
        list2Transition.enabled = true;
        item.moved = true;
        listto.model.insert(listto.currentIndex, item);
        listfrom.model.remove(listfrom.currentIndex, 1);
    }
}

您也可以使用拖放功能执行相同的操作。丢弃功能。

在ListModel之间移动项目

1 个答案: