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(mouse.x-clickPos.x, mouse.y-clickPos.y)
console.debug("delta.x: " + delta.x);
if (
(delta.x < 0) &&
(delBtnShow.running === false && ctrBtnHide.running === false) &&
(delBtn.width == 0)
){
delBtnShow.start();
delTex.text = "删除"
ctrBtnHide.start();
}else if (
(delBtnHide.running === false && ctrBtnShow.running === false) &&
(delBtn.width > 0)
){
delBtnHide.start();
delTex.text = ""
ctrBtnShow.start();
}
}
这样就实现效果啦。
完整代码如下，作为参考：
import QtQuick 2.7
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.2
import Qt.an.qobjectSingleton 1.0 as Global
import "../../Component"
Window{
id:sstpWind
width: 580
height: 420
minimumWidth: 520
minimumHeight: 420
title: "Sttp SetUp Window"
color: Global.GlobalVar.windowBg
visible: true
ListView{
id:sstpView
property bool isClicked: false //初始化没有点击事件
anchors.fill: parent
clip:true
interactive: !isClicked
focus: true
flickableDirection: Flickable.VerticalFlick
boundsBehavior: Flickable.StopAtBounds
ScrollBar.vertical: ScrollBar {id:scrollBar;active: true;}
Keys.onUpPressed: scrollBar.decrease()
Keys.onDownPressed: scrollBar.increase()
move:Transition {
NumberAnimation{
properties: "x,y";
duration: 300
}
}
anchors {
left: parent.left; top: parent.top; right: parent.right;
margins: 2
}
spacing: 4
cacheBuffer: 50 //model: anAirModel
model: ListModel{
id:sstpModel;
ListElement{
num_1:1
num_2:'-020'
ssr:'A5010'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:true//是否为vip
type:"B737-800"//机型
status:"放行"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"滑行"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPPP"//机场
runway:"01"// 跑道
procedure:"LUM-01D"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A5610'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:true//是否为vip
type:"B737-800"//机型
status:"五边"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"脱离"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPMS"//机场
runway:"01"// 跑道
procedure:"LUM-09A"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A0026'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:false//是否为vip
type:"B737-"//机型
status:"穿越"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"移交"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPLJ"//机场
runway:"01"// 跑道
procedure:"LUM-06A"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A0026'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:true//是否为vip
type:"B737-0"//机型
status:"穿越"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"移交"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPLJ"//机场
runway:"01"// 跑道
procedure:"LUM-06A"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A0026'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:false//是否为vip
type:"B737-800"//机型
status:"穿越"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"移交"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPLJ"//机场
runway:"01"// 跑道
procedure:"LUM-06A"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A0026'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:true//是否为vip
type:"A357"//机型
status:"穿越"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"移交"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPLJ"//机场
runway:"01"// 跑道
procedure:"LUM-06A"//进离场程序
}
ListElement{
num_1:1
num_2:'-020'
ssr:'A0026'//应答机编码
air_iden:"CES5401"//呼号 航班号
vip:true//是否为vip
type:"A737"//机型
status:"穿越"//状态
el:"16"//机场标高 ALT-高度
ctrBtn:"移交"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
time:"1215"//时间
airport:"ZPLJ"//机场
runway:"01"// 跑道
procedure:"LUM-06A"//进离场程序
}
} delegate:Rectangle{
id:sstpDelegate
property int fromIndex:0
property int toIndex:0
property var controlColor:["#00C9FD", "#DB0058", "#FF7400", "#81EE8E"]
width: parent.width
height: 60
MouseArea {
id:mousearea
property point clickPos: "0,0"
anchors.fill: parent
onClicked: {
sstpView.currentIndex = index
}
onPressed: {
sstpView.currentIndex = index
sstpDelegate.fromIndex = index
sstpView.isClicked = true //每项按钮点击就true clickPos = Qt.point(mouse.x,mouse.y) }
onReleased: {
sstpView.isClicked = false //每项按钮点击就false
console.log("fromIndex:",sstpDelegate.fromIndex,"toIndex:",sstpDelegate.toIndex) var delta = Qt.point(mouse.x-clickPos.x, mouse.y-clickPos.y)
console.debug("delta.x: " + delta.x);
if (
(delta.x < 0) &&
(delBtnShow.running === false && ctrBtnHide.running === false) &&
(delBtn.width == 0)
){
delBtnShow.start();
delTex.text = "删除"
ctrBtnHide.start(); }else if (
(delBtnHide.running === false && ctrBtnShow.running === false) &&
(delBtn.width > 0)
){
delBtnHide.start();
delTex.text = ""
ctrBtnShow.start();
}
}
onPositionChanged: {
var lastIndex = sstpView.indexAt(mousearea.mouseX + sstpDelegate.x,mousearea.mouseY + sstpDelegate.y);
if ((lastIndex < 0) || (lastIndex > sstpModel.rowCount()))
return;
if (index !== lastIndex){
sstpModel.move(index, lastIndex, 1);
}
sstpDelegate.toIndex = lastIndex;
}
}
Row{
Rectangle{//选中当前 颜色高亮
id:curRect
width: 5
height: sstpDelegate.height
color: index===sstpView.currentIndex ? Global.GlobalVar.sstpCurIndex : Global.GlobalVar.mainFontColor//选中颜色设置
}
//进程单信息
Rectangle{
id:infoRect
width: sstpDelegate.width - controlRect.width - 5
height: sstpDelegate.height
Row{
Rectangle{
width: infoRect.width/6
height: infoRect.height
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
MyText{//num_1
text: num_1
fontColor: b1;
fontSize: m;
}
Rectangle{
implicitWidth: 28
implicitHeight: 28
radius: 28;
color: controlColor[3]
MyText{//num_2
anchors.centerIn: parent
text:num_2
fontColor:b1
}
}
}
}
Rectangle{
width: infoRect.width/6
height: infoRect.height
//第二列
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
MyText{//航班呼号
text: air_iden
fontColor: b1
fontSize: xl
}
MyText{//状态
text:status;
fontColor: b1
fontSize: l
}
}
}
Rectangle{
width: infoRect.width/6
height: infoRect.height
//第三列
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: parent.width/6
//anchors.horizontalCenter: parent.horizontalCenter
Rectangle{
width: 15
height: 15
radius: 15
color: vip ? controlColor[0]: "transparent"
MyText{//vip
anchors.centerIn: parent
text: vip ? "V" :''//判断布尔值
color: "#FFF"
fontColor:color
fontSize: s
}
}
MyText{
text: type;
fontColor: b1
fontSize: m
}
}
}
Rectangle{
width: infoRect.width/6
height: infoRect.height
//第四列
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
TextInput{//机场
text: airport;
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: { }
}
MyText{//标高
text: el;
fontColor: b1
fontSize: m
}
}
}
Rectangle{
width: infoRect.width/6
height: infoRect.height
//第五列
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
TextInput{//进离场程序
text: procedure;
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
}
MyText{//应答机编码
text: ssr;
fontColor: b1
fontSize: m
} }
} Rectangle{
width: infoRect.width/6
height: infoRect.height
//第六列
ColumnLayout{
anchors.verticalCenter: parent.verticalCenter
anchors.horizontalCenter: parent.horizontalCenter
TextInput{//时间
text: time;
color: controlColor[2];
font.pointSize: 12
onEditingFinished: { }
}
TextInput{//降落跑道
text: runway;
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: { }
}
}
}
}
}
RecLine{id:recLine;direction:false}
Rectangle{
id:controlRect
width: 80
height: sstpDelegate.height
Row{
//管制按钮
Rectangle{
id: controlBtn
anchors.verticalCenter: parent.verticalCenter
height: controlRect.height - 1
width: controlRect.width - 1
radius: 3
//color: Global.GlobalVar.btnBorderColor
color:"#42A5F5"
//color: ctrBtn == "滑行" ? controlColor[0] : (ctrBtn == "脱离" ? controlColor[1] : (ctrBtn == "移交" ? controlColor[2] : Global.GlobalVar.mainColor))
Text {
id:btnTex
font.family: "microsoft yahei"
font.pointSize: 10
anchors.centerIn: parent
text: ctrBtn
color: Global.GlobalVar.whiteColor
}
MouseArea{
anchors.fill: parent
}
}
//删除按钮
Rectangle{
id:delBtn
anchors.verticalCenter: parent.verticalCenter
height: controlRect.height-1
width: 0
radius: 3
color: Global.GlobalVar.remindColor
//color: ctrBtn == "滑行" ? controlColor[0] : (ctrBtn == "脱离" ? controlColor[1] : (ctrBtn == "移交" ? controlColor[2] : Global.GlobalVar.mainColor))
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)
}
}
}
//滑动显示删除按钮，覆盖管制按钮
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
}
}
}
}
}
}
QML学习笔记（八）— QML实现列表侧滑覆盖按钮的更多相关文章
- QML学习笔记（五）— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- QML学习笔记（六）- 简单计时器和定时器
做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...
- qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936本文章博客地址:http://blog.csdn.net/qq21497936/article/details/78516 ...
- Learning ROS forRobotics Programming Second Edition学习笔记(八)indigo rviz gazebo
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- python3.4学习笔记(八) Python第三方库安装与使用，包管理工具解惑
python3.4学习笔记(八) Python第三方库安装与使用,包管理工具解惑 许多人在安装Python第三方库的时候, 经常会为一个问题困扰:到底应该下载什么格式的文件?当我们点开下载页时, 一般 ...
- Go语言学习笔记八： 数组
Go语言学习笔记八: 数组 数组地球人都知道.所以只说说Go语言的特殊(奇葩)写法. 我一直在想一个人参与了两种语言的设计,但是最后两种语言的语法差异这么大.这是自己否定自己么,为什么不与之前统一一下 ...
- 【opencv学习笔记八】创建TrackBar轨迹条
createTrackbar这个函数我们以后会经常用到,它创建一个可以调整数值的轨迹条,并将轨迹条附加到指定的窗口上,使用起来很方便.首先大家要记住,它往往会和一个回调函数配合起来使用.先看下他的函数 ...
- Flutter学习笔记（12）--列表组件
如需转载,请注明出处:Flutter学习笔记(12)--列表组件 在日常的产品项目需求中,经常会有列表展示类的需求,在Android中常用的做法是收集数据源,然后创建列表适配器Adapter,将数据源 ...
- Python学习笔记（二）——列表
Python学习笔记(二)--列表 Python中的列表可以存放任何数据类型 >>> list1 = ['Hello','this','is','GUN',123,['I','Lov ...
随机推荐
- note2
- Testng报错:method-selectors?,parameter*,groups?,packages?,classes?
以上的报错信息有两种可能的原因: 1.xml的格式确实有误 2.xml的格式正确,但是工程中testng的jar包不止一个,从而导致有歧义或者冲突(这个很可能发生在同一个workspace有多个工程的 ...
- 【TCP】tcp协议通信中io
阻塞IO recv,接收数据,若没有,将阻塞, 当对方发数据来后,linux内核缓冲区得到数据, 内核数据复制到recv()调用所在的用户空间, 阻塞解除,进行下一步处理, 非阻塞IO 轮询调用rec ...
- iOS 常用随机数
比如:获取一个随机整数范围在:[0,100)包括0,不包括100 ; 参考:https://www.jianshu.com/p/106475cbd3da
- 【CF1210D】Konrad and Company Evaluation（vector，图论）
题意:有i个人,m对两两之间的关系,第i个人初始的薪水为i,有q次操作,第i次操作会把v[i]号的薪水提升成n+i 如果两个人之间存在关系,薪水高的会向薪水低的炫耀 定义u,v,w为一个三元组,当u向 ...
- SQL各种JOIN
JOIN(= INNER JOIN):返回匹配的结果,没有匹配则没结果: LEFT JOIN(= LEFT OUTER JOIN):返回匹配的与左表的所有数据: RIGHT JOIN(= RIGHT ...
- Axure RP 8.0软件安装教程
Axure8.0(32/64)位下载地址: 链接:https://pan.baidu.com/s/1qYSLkKW 密码:skaw 软件介绍: Axure RP是一个专业的快速原型设计工具,让负责定义 ...
- PHP连接FTP服务的简单实现
PHP连接FTP服务: <?php class Ftp { private $connect; private $getback; /** * ftp连接信息 * @var array */ p ...
- JS 替换
JS 字符串有replace() 方法.但这个方法只会对匹配到的第一个字串替换. 如下例: var str = "wordwordwordword"; var strNew = s ...
- SercletConfig 详解
ServletConfig:从一个servlet被实例化后,对任何客户端在任何时候访问有效,但仅对本servlet有效,一个servlet的ServletConfig对象不能被另一个servlet访问 ...