QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView
鼠标单击可选中当前项，头部呈绿色显示；按压当前项可进行拖拽更换列表项位置；点击数据可以进行编辑；
GitHub:八至
作者：狐狸家的鱼
这里是自己定义的model，有些字体和颜色都是使用的全局属性，
ListView{
id:thelist
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{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高 ALT-高度
status:"TAI"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//departureTime 起飞时间 离港时间
arrivalTime:"1423"// arrivalTime到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//takeOffRunway 起飞跑道
landingRunway:"xx"//landingRunway 降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"HANDOVER"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"CLR"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"OFF"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"DESCENT"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"DISENGAGE"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
ListElement{
air_iden:"CES5401"//呼号 航班号
type:"A319"//机型
el:"07056"//机场标高
status:"TAI"// 管制按钮 HANDOVER-移交 CLR-放行 TAI-滑行 OFF-起飞 DESCENT-降落 DISENGAGE-脱离
etd:"1215"//预计离港时间
eta:"1413"//预计到达时间
departureTime:"1215"//起飞时间 离港时间
arrivalTime:"1423"//到达时间 到港时间
ades:"ZSPD"//到达机场 目的地
takeOffRunway:"xx"//起飞跑道
landingRunway:"xx"//降落跑道
procedure:"xxx"//进离场程序
//tas:"K0860"//巡航速度 860km/h
//waypoint1:"TEBUN";//航路点
//assr:"6255"//应答机编码
//cvsm:"S0820"//对应高度层 82km
}
}
delegate:Rectangle{
id:sstpDelegate
property int fromIndex:0
property int toIndex:0
width: parent.width
height: 80
MouseArea {
id:mousearea
anchors.fill: parent
onClicked: {
thelist.currentIndex = index
}
onPressed: {
thelist.currentIndex = index
sstpDelegate.fromIndex = index
thelist.isClicked = true //每项按钮点击就true
}
onReleased: {
thelist.isClicked = false //每项按钮点击就false
console.log("fromIndex:",sstpDelegate.fromIndex,"toIndex:",sstpDelegate.toIndex)
}
onPositionChanged: {
var lastIndex = thelist.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===thelist.currentIndex ? Global.GlobalVar.sstpCurIndex : Global.GlobalVar.mainFontColor//选中颜色设置
}
Rectangle{//info
id:infoRect
width: sstpDelegate.width - controlRect.width - 5
height: sstpDelegate.height
RowLayout{
spacing: Global.GlobalVar.space*4
anchors.left: parent.left
anchors.leftMargin: Global.GlobalVar.space
ColumnLayout{
spacing: Global.GlobalVar.space
MyText{//航班呼号
text: air_iden
fontColor: b1
fontSize: xl
}
TextInput{//预计起飞时间
text: etd
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
TextInput{//起飞时间
text: departureTime
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
}
ColumnLayout{
spacing: Global.GlobalVar.space
MyText{//飞行机型
text: type
fontColor: b1
fontSize: m
}
TextInput{//预计到达时间
text: eta
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
TextInput{//到达时间
text: arrivalTime
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
}
ColumnLayout{
spacing: Global.GlobalVar.space*4
MyText{//机场标高
text: el
fontColor: b1
fontSize: m
}
TextInput{//目的机场
text: ades
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
}
ColumnLayout{
spacing: Global.GlobalVar.space*4
TextInput{//起飞跑道
text: takeOffRunway
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
}
TextInput{//进离场程序
text: procedure
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
onEditingFinished: {
}
}
}
TextInput{//降落跑道
anchors.top: parent.top
text: takeOffRunway
color: Global.GlobalVar.mainFontColor
font.pointSize: 12
}
}
}
RecLine{id:recLine;direction:false}
Rectangle{
id:controlRect
width: 100
height: sstpDelegate.height
ColumnLayout{
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.verticalCenter
BorderButton{
implicitWidth: 80
implicitHeight: 30
borderbtnText: status
fontSize: 10
MouseArea{
anchors.fill: parent
}
}
MyText{
anchors.horizontalCenter: parent.horizontalCenter
font.family: "FontAwesome"
text: '\uf014'
fontSize: xl
MouseArea{
anchors.fill: parent
onClicked: an_del.open()
}
}
}
}
}
}
IsDelDialog{id:an_del;x:SSTPWind.width/2;y:SSTPWind.height/2;}
Connections{
target: an_del.del_area;
onClicked:{
//anAirModel.remove(thelist.currentIndex)
sstpModel.remove(thelist.currentIndex)
an_del.close()
}
}
}
关于拖拽，参考https://blog.csdn.net/zhengtianzuo06/article/details/78631977，由于设置交互事件，会影响鼠标滚动和拖拽，所以进行了修改
interactive: !isClicked
这样就不会影响拖拽和鼠标滚动了。
QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView的更多相关文章
- Bootstrap学习笔记之Nestable可拖拽树结构
Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模 ...
- OpenLayers学习笔记（六）— 拖拽叠加层overlayer
是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...
- OpenLayers学习笔记（五）— 拖拽Feature图层
参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...
- （转）Qt Model/View 学习笔记 (七)——Delegate类
Qt Model/View 学习笔记 (七) Delegate 类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...
- Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live
中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...
- QML学习笔记（六）- 简单计时器和定时器
做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...
- QML学习笔记（五）— 做一个简单的待做事项列表
做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...
- Typescript 学习笔记七：泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- python3.4学习笔记(七) 学习网站博客推荐
python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...
- Go语言学习笔记七： 函数
Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...
随机推荐
- Tomcat启用GZIP压缩，提升web性能
一.前言 最近做了个项目,遇到这么一个问题:服务器返回给客户端的json数据量太大(大概65M),在客户端加载了1分多钟才渲染完毕,费时耗流量,用户体验极其不好.后来网上搜优化的方法,就是Http压缩 ...
- POI解析Excel代码
// 批量区域数据导入 @Action(value = "area_batchImport") public String batchImport() throws IOExcep ...
- checkbox操作判断 Jquery选择器
function checkAll(d){ console.log(d); console.log(d.checked); //注意 这里是d不是$(d) 不是jQuery对象 if(d.checke ...
- 手机端图像编辑上传-cropper
编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义UI,引用'cropper.js', 'exif.js' /*初始化裁剪插件*/ var screenWidth = $(window).wid ...
- 6s ios9.0平台 微信小程序的fixed定位兼容性问题
如果不设置top和left的话 就会出现不显示问题
- php的amqp扩展 安装(windows) rabbitmq学习篇
因为RabbitMQ是由erlang语言实现的,所以先要安装erlang环境erlang 下载安装 http://www.erlang.org/download.htmlrabbitmq 下载安装 h ...
- Android——SMS接收发短信与运行权限
好久没写了,最近学习Android的相关知识,包括UI组件与布局.Activity生命周期等,而这次要讲的是,Broadcast Receiver的相关知识,主要是接收发短信,SmsManager.S ...
- Linux基础学习（13）--Linux系统管理
第十三章——Linux系统管理 一.进程管理 1.进程查看: (1)进程简介:进程是正在执行的一个程序或命令,每一个进程都是一个运行的实体,都有自己的地址空间,并占用一定的系统资源. (2)进程管理的 ...
- mysql定时任务event——清理过期数据
需要删除数据的表名:t_req_log 建表sql CREATE TABLE `t_req_log` ( `id` ) NOT NULL AUTO_INCREMENT, `host` ) DEFAUL ...
- LR运行负载测试场景-笔记
控制虚拟用户的行为:通用如图方式 查看用户的运行信息 在控制器释放前释放集合点用户 记录运行时注释---scenario-execution notes Vuser 对话框:初始化.运行.停止运行用户 ...