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

本文介绍了如何在QML中实现列表项的侧滑删除功能,覆盖原有的操作按钮。通过动态切换按钮宽度实现滑动效果,并详细讲解了相关动画和鼠标事件处理逻辑。
摘要由CSDN通过智能技术生成

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
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值