Qt中QML实现滑动右侧删除

Qt中QML实现滑动右侧删除

最近接到需求实现滑动右侧删除的功能，想了想还是分享一下我的解决方法，供大家参考。以下是一个demo：

import QtQuick 2.12
import QtQuick.Window 2.12

Window {
    visible: true
    width: 640
    height: 480
    ListView{
        width: parent.width
        height: parent.height
        anchors.fill: parent
        model: 5
        delegate:Flickable {
            width: parent.width
            height: 100
            contentWidth: parent.width + 140  // 这里加140是给删除键留空间，可以自行修改
            contentHeight: 100
            boundsBehavior:Flickable.StopAtBounds // 设置边界不会被拉出
            Rectangle{
                anchors.fill: parent
                border.width: 1
                border.color: "black"
                width: parent.width
                height: 20
                Text {
                    anchors.centerIn: parent
                    font.pointSize: 16
                    width: parent.width
                    text: "我是一行字"
                    color: "red"
                }
                // 删除键
                Rectangle{
                    height: parent.height
                    width: 140		// 这里与上面的contentWidth后加的数值对应
                    color: "red"
                    anchors.right: parent.right
                    Text {
                        anchors.centerIn: parent
                        text: qsTr("删除")
                        color: "#ffffff"
                        font.pixelSize: 20
                        font.bold: true
                    }
                    MouseArea{
                        anchors.fill: parent
                        onClicked: {
                            // ...
                        }
                    }
                }
            }
        }
    }
}

运行结果：

代码很简单，结合ListView实现，也是常用的情形，有什么问题欢迎留言！