在ListModel之间移动项目-Java 学习之路

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

由于 ListModel 的 move 方法，在一个列表中重新排序不会产生任何问题 . 但是，为了在两个列表模型之间交换项目，我想我必须使用 ListModel 的 remove 和 insert 或 set 操作 . 使用 set 的第一次实验不起作用 .

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

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);
    }
}

您还可以使用拖放功能执行相同的操作 .

回复于 2024-05-04T22:33:20+08:00

在ListModel之间移动项目

1 回答

相关问题