Qt基于Qml列表项拖放操作示例

最新推荐文章于 2025-04-16 19:00:00 发布

自由软件开发者

最新推荐文章于 2025-04-16 19:00:00 发布

阅读量539

点赞数 1

CC 4.0 BY-SA版权

分类专栏： QT编程文章标签： qt 开发语言

本文链接：https://blog.csdn.net/fittec/article/details/127661774

QT编程专栏收录该内容

148 篇文章

订阅专栏

本文介绍了一个使用QML实现的列表项拖放功能示例。通过处理鼠标Y坐标的变化来更新列表中项目的顺序，实现了直观的交互体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

演示效果

主要通过处理鼠标Y坐标信号来实现

onMouseYChanged: {
                    var lastIndex = listview.indexAt(mousearea.mouseX + listItem.x,
                                                     mousearea.mouseY + listItem.y);
                    if ((lastIndex < 0) || (lastIndex > listModel.rowCount()))
                        return;
                    if (index !== lastIndex){
                        listModel.move(index, lastIndex, 1);
                    }
                    listItem.toIndex = lastIndex;
                }

完整QML

import QtQuick 2.12
import QtQuick.Controls 2.12
ApplicationWindow {
    visible: true
    width: 400
    height: 300
    title: qsTr("Qt基于Qml列表项拖放操作示例")
    ListModel {
        id: listModel

        ListElement {
            text: qsTr("1.列表项拖放操作示例A")
        }
        ListElement {
            text: qsTr("2.列表项拖放操作示例B")
        }
        ListElement {
            text: qsTr("3.列表项拖放操作示例C")
        }
        ListElement {
            text: qsTr("4.列表项拖放操作示例D")
        }
        ListElement {
            text: qsTr("5.列表项拖放操作示例E")
        }
    }

    ListView{
        id: listview
        width: parent.width
        height: parent.height
        anchors.fill: parent
        model: listModel
        delegate: listDelegate
        interactive: false
    }

    Component{
        id: listDelegate
        Rectangle{
            property int fromIndex: 0
            property int toIndex: 0

            id: listItem
            width: parent.width
            height: 30

            Text {
                id: label
                font.family: "microsoft yahei"
                font.pointSize: 12
                height: parent.height
                width: parent.width
                text: model.text
                color: "#148014"
                verticalAlignment: Text.AlignVCenter
            }
            Rectangle{
                color: "#AAAAAA"
                height: 1
                width: parent.width
                anchors.bottom: parent.bottom
            }
            MouseArea {
                id: mousearea
                anchors.fill: parent
                onPressed: {
                    listview.currentIndex = index;
                    listItem.fromIndex = index;
                    label.color = "white";
                    listItem.color="#FF00FF";
                }
                onReleased: {
                    label.color = "#148014"
                    listItem.color="#FFFFFF";
                    console.debug("fromIndex: ", listItem.fromIndex, "toIndex: ", listItem.toIndex);
                }
                onMouseYChanged: {
                    var lastIndex = listview.indexAt(mousearea.mouseX + listItem.x,
                                                     mousearea.mouseY + listItem.y);
                    if ((lastIndex < 0) || (lastIndex > listModel.rowCount()))
                        return;
                    if (index !== lastIndex){
                        listModel.move(index, lastIndex, 1);
                    }
                    listItem.toIndex = lastIndex;
                }
            }
        }
    }
}