Qml Listview页面滑动删除

最新推荐文章于 2025-04-15 19:06:34 发布

Fu_Lin_

最新推荐文章于 2025-04-15 19:06:34 发布

阅读量884

点赞数

CC 4.0 BY-SA版权

分类专栏： QtAndroid转载文章

原文链接：https://blog.youkuaiyun.com/zhengtianzuo06/article/details/78507328

QtAndroid转载文章专栏收录该内容

37 篇文章

订阅专栏

本文分享了一个使用QML实现的动态列表，可以实现点击删除元素的效果，展示了如何通过ListModel和ListView配合鼠标事件处理来达到这一目的。

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

前言

看到网上有这么一段页面删除代码，感觉挺不错，虽然实现很简单，但是看起来效果还可以，所以展示一下，给需要的人使用

效果图

先看下效果图：
在这里插入图片描述

代码实现

下面是实现代码

ListModel {
        id: listModel

        ListElement {
            text: qsTr("111222333随便的一些内容")
        }
        ListElement {
            text: qsTr("AAABBBCCC随便的一些内容")
        }
        ListElement {
            text: qsTr("DDDEEEFFF随便的一些内容")
        }
        ListElement {
            text: qsTr("GGGHHHIII随便的一些内容")
        }
        ListElement {
            text: qsTr("JJJKKKLLL随便的一些内容")
        }
    }

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

    Component{
        id: listDelegate
        Rectangle{
            id: listItem
            width: parent.width
            height: 30

            Text {
                id: text
                font.family: "microsoft yahei"
                font.pointSize: 12
                height: parent.height
                width: parent.width - delBtn.width
                text: model.text
                color: "green"
                verticalAlignment: Text.AlignVCenter
                MouseArea{
                    property point clickPos: "0,0"

                    anchors.fill: parent
                    onPressed: {
                        clickPos  = Qt.point(mouse.x,mouse.y);
                    }
                    onReleased: {
                        var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
                        console.debug("delta.x: " + delta.x);
                        if ((delta.x < 0) && (aBtnShow.running === false) && (delBtn.width == 0)){
                            aBtnShow.start();
                        }else if (aBtnHide.running === false && (delBtn.width > 0)){
                            aBtnHide.start();
                        }
                    }
                }
            }
            Rectangle{
                color: "#AAAAAA"
                height: 1
                width: parent.width
                anchors.bottom: parent.bottom
            }
            Rectangle{
                id: delBtn
                height: parent.height
                width: 0
                color: "#EE4040"
                anchors.right: parent.right
                Text {
                    font.family: "microsoft yahei"
                    font.pointSize: 12
                    anchors.centerIn: parent
                    text: qsTr("删除")
                    color: "#ffffff"
                }
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        listview.model.remove(index);
                    }
                }
            }
            PropertyAnimation{
                id: aBtnShow
                target: delBtn
                property: "width"
                duration: 100
                from: 0
                to: 60
            }
            PropertyAnimation{
                id: aBtnHide
                target: delBtn
                property: "width"
                duration: 100
                from: 60
                to: 0
            }
        }
    }