QML ListView 鼠标拖拽交换行

刺骨的言语ヽ痛彻心扉 2022-12-21 10:49 452阅读 0赞

QML 的 ListView 本身有 move 过渡（Transition）属性，可以用来做一些交换动画效果。其中 move 为当前项的过渡，moveDisplaced 为被交换项的过渡。鼠标拖拽可以用一个 MouseArea 来实现，当鼠标滑动到相邻行后就调用 model 的 move 接口，这样就会触发 view 的 move 过渡动画。效果如下：

![20201116011435269.gif][]

感觉有点生硬，勉强能用。

完整代码如下：

import QtQuick 2.12
    import QtQuick.Window 2.12
    
    //演示ListView的拖拽移动
    Window {
        width: 360
        height: 520
        visible: true
        title: qsTr("ListView Move")
    
        ListModel{
            id: list_model
            Component.onCompleted: {
                for(var i=0;i<50;i++)
                    list_model.append({"value": i});
            }
        }
    
        ListView{
            id: list_view
            anchors.fill: parent
            anchors.margins: 20
            model: list_model
            clip: true
            //interactive:false
            //当前项
            move: Transition {
                NumberAnimation { property: "y"; duration: 200 }
            }
            //被交换的项
            moveDisplaced: Transition {
                NumberAnimation { property: "y"; duration: 200 }
            }
            delegate: Rectangle{
                id: list_item
                width: ListView.view.width
                height: 40
                border.color: "white"
                color: mouse_area.pressed?"black":"gray"
                z: mouse_area.pressed?10:1
                Text {
                    anchors.centerIn: parent
                    text: "row:"+index+" value:"+value
                    color: "white"
                    font.pixelSize: 20
                }
                MouseArea {
                    id: mouse_area
                    anchors.fill: parent
                    //防止被view窃取事件
                    preventStealing: true
                    onPositionChanged: {
                        //item在view位置+鼠标在item中位置，判断是否拖动到了其他item上，是的话就交换两者
                        var other_index = list_view.indexAt(mouse_area.mouseX + list_item.x, mouse_area.mouseY + list_item.y);
                        if (other_index !== -1 && pressed) {
                            if (index !== other_index) {
                                list_model.move(index, other_index, 1);
                            }
                        }
                    }
                }
            }
        }
    }

这里还有个问题就是 QML 中提供的 Model 本身就带有 move 方法：

![20201116112139467.png][]

但如果用 C++ 注册的 Model ，得自己实现，并通过调用 beginMoveRows 和 endMoveRows 来触发交换响应。这里还有个问题就是 beginMoveRows 的参数：

bool QAbstractItemModel::beginMoveRows(const QModelIndex &sourceParent, int sourceFirst, int sourceLast, const QModelIndex &destinationParent, int destinationChild)

只交换单行的时候，ModelIndex 填默认空值，前两个 int 参数直接填待交换的 from 行，最后一个 int 参数，如果 from 比 to 大（从后往前移）就直接填 to 值，如果 from 比 to 小（从前往后移动）就需要填 to+1。

//model 本身有 moveRows 接口，但是没导出给 qml
    void AudioInfoListModel::swapRow(int from, int to)
    {
        if(from!=to&&from>=0&&from<infoList.count()&&to>=0&&to<infoList.count())
        {
            beginMoveRows(QModelIndex(),from,from,
                          QModelIndex(),from>to?(to):(to+1));
            infoList.swapItemsAt(from,to);
            endMoveRows();
        }
    }

（2021-1-28补充）之前使用 swapItemsAt 只考虑了邻近交换，但是跨行的话 move 触发当前行移动而不是交换，而内存却把两项交换了，所以应该改为 takeAt+insert 来移动选中行到目的行：

void AudioInfoListModel::swapRow(int from, int to)
    {
        if(from!=to&&from>=0&&from<infoList.count()&&to>=0&&to<infoList.count())
        {
            beginMoveRows(QModelIndex(),from,from,
                          QModelIndex(),from>to?(to):(to+1));
            auto item=allAudio.takeAt(from);
            allAudio.insert(to,item);
            endMoveRows();
        }
    }

参照博客：[https://blog.csdn.net/anyinxi/article/details/107227336][https_blog.csdn.net_anyinxi_article_details_107227336]

参照文档：[https://doc.qt.io/qt-5/qabstractitemmodel.html\#beginMoveRows][https_doc.qt.io_qt-5_qabstractitemmodel.html_beginMoveRows]

[20201116011435269.gif]: /images/20221120/b183e5f7107d49d689c8c2c826244568.png
[20201116112139467.png]: /images/20221120/14b72834d23942a19b2cf6867c98cc4b.png
[https_blog.csdn.net_anyinxi_article_details_107227336]: https://blog.csdn.net/anyinxi/article/details/107227336
[https_doc.qt.io_qt-5_qabstractitemmodel.html_beginMoveRows]: https://doc.qt.io/qt-5/qabstractitemmodel.html#beginMoveRows