QML学习笔记（八）— QML实现列表侧滑覆盖按钮

QML实现列表右边滑动删除按钮，并覆盖原有的操作按钮，点击可实现删除当前项

本文链接：QML实现列表侧滑覆盖按钮

作者：狐狸家的鱼

GitHub：八至

列表实现在另一篇博客已经提及，列表可选中、拖拽、编辑，现在优化一下，实现滑动删除效果，并覆盖原有的操作按钮。

主要就是对操作按钮与删除按钮之间做一个动态切换效果。

管制按钮一开始就是默认显示的，代码如下：　　　　　　　

　　//管制按钮
                                Rectangle{
                                    id: controlBtn
                                    anchors.verticalCenter: parent.verticalCenter
                                    height: controlRect.height - 1
                                    width: controlRect.width - 1
                                    radius: 3
                                    color:"#42A5F5"
                                    Text {
                                        id:btnTex
                                        font.family: "microsoft yahei"
                                        font.pointSize: 10
                                        anchors.centerIn: parent
                                        text: ctrBtn
                                        color: Global.GlobalVar.whiteColor
                                    }
                                    MouseArea{
                                        anchors.fill: parent
                                    }
                                }

删除按钮一开始是不显示的，宽度设置为0，这样在动态切换的时候对宽度进行设置即可　　　　　　　　　　　　　

　//删除按钮
                                Rectangle{
                                    id:delBtn
                                    anchors.verticalCenter: parent.verticalCenter
                                    height: controlRect.height-1
                                    width: 0
                                    radius: 3
                                    color: Global.GlobalVar.remindColor
                                   
                                    Text {
                                        id:delTex
                                        font.family: "microsoft yahei"
                                        font.pointSize: 10
                                        anchors.centerIn: parent
                                        color: Global.GlobalVar.whiteColor
                                    }
                                    MouseArea{
                                        anchors.fill: parent
                                        onClicked: {
                                            sstpModel.remove(sstpView.currentIndex)
                                        }
                                    }
                                }

因为要滑动覆盖按钮，所有这里存在四个动画，第一是删除按钮需要滑动设置宽度大于0，显示出来，第二是管制按钮的宽度设置为0，被删除按钮覆盖隐藏掉，第三是点击当前项的其他地方，将已经显示的删除按钮隐藏，宽度设为0，第四是管制按钮再次显示，宽度设为大于0：　　　　　　

//滑动显示删除按钮，覆盖管制按钮
                                PropertyAnimation{
                                    id: delBtnShow
                                    target: delBtn
                                    property: "width"
                                    duration: 150
                                    from: 0
                                    to: controlRect.width - 1
                                }
                                PropertyAnimation{
                                    id: delBtnHide
                                    target: delBtn
                                    property: "width"
                                    duration: 150
                                    from: controlRect.width - 1
                                    to: 0
                                }
                                //点击隐藏删除按钮，显示管制按钮
                                PropertyAnimation{
                                    id: ctrBtnShow
                                    target: controlBtn
                                    property: "width"
                                    duration: 150
                                    from: 0
                                    to: controlRect.width - 1
                                }
                                PropertyAnimation{
                                    id: ctrBtnHide
                                    target: controlBtn
                                    property: "width"
                                    duration: 150
                                    from: controlRect.width - 1
                                    to: 0
                                }

动态效果如何触发呢，滑动是鼠标按压->拖动->鼠标释放实现的，逻辑处理如下：

在代理的当前项鼠标可操作区域MouseArea{}声明点击的坐标点

 property point clickPos: "0,0"

然后在鼠标按压事件里获取当前坐标点：

onPressed: {
    ...
     clickPos  = Qt.point(mouse.x,mouse.y)

}

鼠标释放完成滑动覆盖：　　　　　　　　　　

　onReleased: {
                            
                            var delta = Qt.point(mou