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 ...
随机推荐
- redisTemplate 封装bitcout
@Repositorypublic class RedisServiceExtend { @Autowired private RedisTemplate<String, String> ...
- shell脚本条件测试与比较
1.条件测试常用语法 test 测试表达式 利用test命令进行条件测试表达式,test命令与测试表达式之间至少有一个空格 [ 测试表达式 ] 通过[ ]中括号进行条件测试表达式,[]中括号边界与测试 ...
- 每天一个Linux命令：locate(19)
locate locate命令 让使用者可以很快速的搜寻档案系统内是否有指定的档案.其方法是先建立一个包括系统内所有档案名称及路径的数据库,之后当寻找时就只需查询这个数据库,而不必实际深入档案系统之中 ...
- wnmp的配置
第一部分:准备工作.(系统:Windows 8.1) 1.首先是下载软件. NGINX-1.3.8官网下载:http://nginx.org/en/download.html PHP5.4.8版本下载 ...
- codeforces798C - Mike and gcd problem (数论+思维)
原题链接:http://codeforces.com/contest/798/problem/C 题意:有一个数列A,gcd(a1,a2,a3...,an)>1 时称这个数列是“漂亮”的.存在这 ...
- Key Set
http://acm.hdu.edu.cn/contests/contest_showproblem.php?pid=1011&cid=594 Key Set Time Limit: 2000 ...
- python中global的作用域
#python引用变量的顺序: 当前作用域局部变量->外层作用域变量->当前模块中的全局变量->python内置变量 . ''' a=30 声明为全局变量 a=20 为test()函 ...
- docker镜像加速遇见的一个问题
今天运行docker发现了一个问题,运行docker images会报 Cannot connect to the Docker daemon at unix:///var/run/docker.so ...
- FileInputStream_FileOutputStream
Writer的基本方法 //向输出流中写入一个字符数据,该字节数据为参数b的低16位 void write(int c) throws IOException //将一个字符类型的数组中的数据写入输出 ...
- 关于linux的一些常用的指令
top:命令经常用来监控linux的系统状况,比如cpu.内存的使用. free:观察内存使用. Find:查找指定的文件. Whereis:查找指定的文件源和二进制文件和手册等 Which:用于查询 ...