鼠标单击可选中当前项，头部呈绿色显示；按压当前项可进行拖拽更换列表项位置；点击数据可以进行编辑；

GitHub:八至

作者：狐狸家的鱼

这里是自己定义的model，有些字体和颜色都是使用的全局属性，

  1. ListView{
  2.         id:thelist
  3.         property bool isClicked: false //初始化没有点击事件
  4.         anchors.fill: parent
  5.         clip:true
  6.         interactive: !isClicked
  7.         focus: true
  8.         flickableDirection: Flickable.VerticalFlick
  9.         boundsBehavior: Flickable.StopAtBounds
  10.         ScrollBar.vertical: ScrollBar {id:scrollBar;active: true;}
  11.         Keys.onUpPressed: scrollBar.decrease()
  12.         Keys.onDownPressed: scrollBar.increase()
  13.         move:Transition {
  14.             NumberAnimation{
  15.                 properties: "x,y";
  16.                 duration: 300
  17.             }
  18.         }
  19.         anchors {
  20.             left: parent.left; top: parent.top; right: parent.right;
  21.             margins: 2
  22.         }
  23.         spacing: 4
  24.         cacheBuffer: 50
  25.  
  26.         //model: anAirModel
  27.         model: ListModel{
  28.             id:sstpModel;
  29.             ListElement{
  30.                 air_iden:"CES5401"//呼号 航班号
  31.                 type:"A319"//机型
  32.                 el:"07056"//机场标高 ALT-高度
  33.                 status:"TAI"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  34.                 etd:"1215"//预计离港时间
  35.                 eta:"1413"//预计到达时间
  36.                 departureTime:"1215"//departureTime 起飞时间 离港时间
  37.                 arrivalTime:"1423"// arrivalTime到达时间 到港时间
  38.                 ades:"ZSPD"//到达机场 目的地
  39.                 takeOffRunway:"xx"//takeOffRunway 起飞跑道
  40.                 landingRunway:"xx"//landingRunway 降落跑道
  41.                 procedure:"xxx"//进离场程序
  42.  
  43.                 //tas:"K0860"//巡航速度 860km/h
  44.                 //waypoint1:"TEBUN";//航路点
  45.                 //assr:"6255"//应答机编码
  46.                 //cvsm:"S0820"//对应高度层 82km
  47.             }
  48.             ListElement{
  49.                 air_iden:"CES5401"//呼号 航班号
  50.                 type:"A319"//机型
  51.                 el:"07056"//机场标高
  52.                 status:"HANDOVER"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  53.                 etd:"1215"//预计离港时间
  54.                 eta:"1413"//预计到达时间
  55.                 departureTime:"1215"//起飞时间 离港时间
  56.                 arrivalTime:"1423"//到达时间 到港时间
  57.                 ades:"ZSPD"//到达机场 目的地
  58.                 takeOffRunway:"xx"//起飞跑道
  59.                 landingRunway:"xx"//降落跑道
  60.                 procedure:"xxx"//进离场程序
  61.  
  62.                 //tas:"K0860"//巡航速度 860km/h
  63.                 //waypoint1:"TEBUN";//航路点
  64.                 //assr:"6255"//应答机编码
  65.                 //cvsm:"S0820"//对应高度层 82km
  66.             }
  67.             ListElement{
  68.                 air_iden:"CES5401"//呼号 航班号
  69.                 type:"A319"//机型
  70.                 el:"07056"//机场标高
  71.                 status:"CLR"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  72.                 etd:"1215"//预计离港时间
  73.                 eta:"1413"//预计到达时间
  74.                 departureTime:"1215"//起飞时间 离港时间
  75.                 arrivalTime:"1423"//到达时间 到港时间
  76.                 ades:"ZSPD"//到达机场 目的地
  77.                 takeOffRunway:"xx"//起飞跑道
  78.                 landingRunway:"xx"//降落跑道
  79.                 procedure:"xxx"//进离场程序
  80.  
  81.                 //tas:"K0860"//巡航速度 860km/h
  82.                 //waypoint1:"TEBUN";//航路点
  83.                 //assr:"6255"//应答机编码
  84.                 //cvsm:"S0820"//对应高度层 82km
  85.             }
  86.             ListElement{
  87.                 air_iden:"CES5401"//呼号 航班号
  88.                 type:"A319"//机型
  89.                 el:"07056"//机场标高
  90.                 status:"OFF"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  91.                 etd:"1215"//预计离港时间
  92.                 eta:"1413"//预计到达时间
  93.                 departureTime:"1215"//起飞时间 离港时间
  94.                 arrivalTime:"1423"//到达时间 到港时间
  95.                 ades:"ZSPD"//到达机场 目的地
  96.                 takeOffRunway:"xx"//起飞跑道
  97.                 landingRunway:"xx"//降落跑道
  98.                 procedure:"xxx"//进离场程序
  99.  
  100.                 //tas:"K0860"//巡航速度 860km/h
  101.                 //waypoint1:"TEBUN";//航路点
  102.                 //assr:"6255"//应答机编码
  103.                 //cvsm:"S0820"//对应高度层 82km
  104.             }
  105.             ListElement{
  106.                 air_iden:"CES5401"//呼号 航班号
  107.                 type:"A319"//机型
  108.                 el:"07056"//机场标高
  109.                 status:"DESCENT"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  110.                 etd:"1215"//预计离港时间
  111.                 eta:"1413"//预计到达时间
  112.                 departureTime:"1215"//起飞时间 离港时间
  113.                 arrivalTime:"1423"//到达时间 到港时间
  114.                 ades:"ZSPD"//到达机场 目的地
  115.                 takeOffRunway:"xx"//起飞跑道
  116.                 landingRunway:"xx"//降落跑道
  117.                 procedure:"xxx"//进离场程序
  118.  
  119.                 //tas:"K0860"//巡航速度 860km/h
  120.                 //waypoint1:"TEBUN";//航路点
  121.                 //assr:"6255"//应答机编码
  122.                 //cvsm:"S0820"//对应高度层 82km
  123.             }
  124.             ListElement{
  125.                 air_iden:"CES5401"//呼号 航班号
  126.                 type:"A319"//机型
  127.                 el:"07056"//机场标高
  128.                 status:"DISENGAGE"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  129.                 etd:"1215"//预计离港时间
  130.                 eta:"1413"//预计到达时间
  131.                 departureTime:"1215"//起飞时间 离港时间
  132.                 arrivalTime:"1423"//到达时间 到港时间
  133.                 ades:"ZSPD"//到达机场 目的地
  134.                 takeOffRunway:"xx"//起飞跑道
  135.                 landingRunway:"xx"//降落跑道
  136.                 procedure:"xxx"//进离场程序
  137.  
  138.                 //tas:"K0860"//巡航速度 860km/h
  139.                 //waypoint1:"TEBUN";//航路点
  140.                 //assr:"6255"//应答机编码
  141.                 //cvsm:"S0820"//对应高度层 82km
  142.             }
  143.             ListElement{
  144.                 air_iden:"CES5401"//呼号 航班号
  145.                 type:"A319"//机型
  146.                 el:"07056"//机场标高
  147.                 status:"TAI"// 管制按钮  HANDOVER-移交 CLR-放行 TAI-滑行  OFF-起飞 DESCENT-降落 DISENGAGE-脱离
  148.                 etd:"1215"//预计离港时间
  149.                 eta:"1413"//预计到达时间
  150.                 departureTime:"1215"//起飞时间 离港时间
  151.                 arrivalTime:"1423"//到达时间 到港时间
  152.                 ades:"ZSPD"//到达机场 目的地
  153.                 takeOffRunway:"xx"//起飞跑道
  154.                 landingRunway:"xx"//降落跑道
  155.                 procedure:"xxx"//进离场程序
  156.  
  157.                 //tas:"K0860"//巡航速度 860km/h
  158.                 //waypoint1:"TEBUN";//航路点
  159.                 //assr:"6255"//应答机编码
  160.                 //cvsm:"S0820"//对应高度层 82km
  161.             }
  162.         }
  163.  
  164.         delegate:Rectangle{
  165.             id:sstpDelegate
  166.             property int fromIndex:0
  167.             property int toIndex:0
  168.             width: parent.width
  169.             height: 80
  170.             MouseArea {
  171.                 id:mousearea
  172.                 anchors.fill: parent
  173.                 onClicked: {
  174.                     thelist.currentIndex = index
  175.                 }
  176.                 onPressed: {
  177.                     thelist.currentIndex = index
  178.                     sstpDelegate.fromIndex = index
  179.                     thelist.isClicked = true //每项按钮点击就true
  180.  
  181.                 }
  182.                 onReleased: {
  183.                     thelist.isClicked = false //每项按钮点击就false
  184.                     console.log("fromIndex:",sstpDelegate.fromIndex,"toIndex:",sstpDelegate.toIndex)
  185.                 }
  186.                 onPositionChanged: {
  187.                     var lastIndex = thelist.indexAt(mousearea.mouseX + sstpDelegate.x,mousearea.mouseY + sstpDelegate.y);
  188.                     if ((lastIndex < 0) || (lastIndex > sstpModel.rowCount()))
  189.                         return;
  190.                     if (index !== lastIndex){
  191.                         sstpModel.move(index, lastIndex, 1);
  192.                     }
  193.                     sstpDelegate.toIndex = lastIndex;
  194.                 }
  195.             }
  196.             Row{
  197.                 Rectangle{
  198.                     id:curRect
  199.                     width: 5
  200.                     height: sstpDelegate.height
  201.                     color: index===thelist.currentIndex ? Global.GlobalVar.sstpCurIndex : Global.GlobalVar.mainFontColor//选中颜色设置
  202.                 }
  203.                 Rectangle{//info
  204.                     id:infoRect
  205.                     width: sstpDelegate.width - controlRect.width - 5
  206.                     height: sstpDelegate.height
  207.                     RowLayout{
  208.                         spacing: Global.GlobalVar.space*4
  209.                         anchors.left: parent.left
  210.                         anchors.leftMargin: Global.GlobalVar.space
  211.                         ColumnLayout{
  212.                             spacing: Global.GlobalVar.space
  213.                             MyText{//航班呼号
  214.                                 text: air_iden
  215.                                 fontColor: b1
  216.                                 fontSize: xl
  217.                             }
  218.                             TextInput{//预计起飞时间
  219.                                 text: etd
  220.                                 color: Global.GlobalVar.mainFontColor
  221.                                 font.pointSize: 12
  222.                                 onEditingFinished: {
  223.  
  224.                                 }
  225.                             }
  226.                             TextInput{//起飞时间
  227.                                 text: departureTime
  228.                                 color: Global.GlobalVar.mainFontColor
  229.                                 font.pointSize: 12
  230.                                 onEditingFinished: {
  231.  
  232.                                 }
  233.                             }
  234.                         }
  235.                         ColumnLayout{
  236.                             spacing: Global.GlobalVar.space
  237.                             MyText{//飞行机型
  238.                                 text: type
  239.                                 fontColor: b1
  240.                                 fontSize: m
  241.                             }
  242.                             TextInput{//预计到达时间
  243.                                 text: eta
  244.                                 color: Global.GlobalVar.mainFontColor
  245.                                 font.pointSize: 12
  246.                                 onEditingFinished: {
  247.  
  248.                                 }
  249.                             }
  250.                             TextInput{//到达时间
  251.                                 text: arrivalTime
  252.                                 color: Global.GlobalVar.mainFontColor
  253.                                 font.pointSize: 12
  254.                                 onEditingFinished: {
  255.  
  256.                                 }
  257.                             }
  258.                         }
  259.                         ColumnLayout{
  260.                             spacing: Global.GlobalVar.space*4
  261.                             MyText{//机场标高
  262.                                 text: el
  263.                                 fontColor: b1
  264.                                 fontSize: m
  265.                             }
  266.                             TextInput{//目的机场
  267.                                 text: ades
  268.                                 color: Global.GlobalVar.mainFontColor
  269.                                 font.pointSize: 12
  270.                                 onEditingFinished: {
  271.  
  272.                                 }
  273.                             }
  274.                         }
  275.                         ColumnLayout{
  276.                             spacing: Global.GlobalVar.space*4
  277.                             TextInput{//起飞跑道
  278.                                 text: takeOffRunway
  279.                                 color: Global.GlobalVar.mainFontColor
  280.                                 font.pointSize: 12
  281.                             }
  282.                             TextInput{//进离场程序
  283.                                 text: procedure
  284.                                 color: Global.GlobalVar.mainFontColor
  285.                                 font.pointSize: 12
  286.                                 onEditingFinished: {
  287.  
  288.                                 }
  289.                             }
  290.                         }
  291.                         TextInput{//降落跑道
  292.                             anchors.top: parent.top
  293.                             text: takeOffRunway
  294.                             color: Global.GlobalVar.mainFontColor
  295.                             font.pointSize: 12
  296.                         }
  297.                     }
  298.                 }
  299.                 RecLine{id:recLine;direction:false}
  300.                 Rectangle{
  301.                     id:controlRect
  302.                     width: 100
  303.                     height: sstpDelegate.height
  304.                     ColumnLayout{
  305.                         anchors.horizontalCenter: parent.horizontalCenter
  306.                         anchors.verticalCenter: parent.verticalCenter
  307.                         BorderButton{
  308.                             implicitWidth: 80
  309.                             implicitHeight: 30
  310.                             borderbtnText: status
  311.                             fontSize: 10
  312.                             MouseArea{
  313.                                 anchors.fill: parent
  314.                             }
  315.                         }
  316.                         MyText{
  317.                             anchors.horizontalCenter: parent.horizontalCenter
  318.                             font.family: "FontAwesome"
  319.                             text: '\uf014'
  320.                             fontSize: xl
  321.                             MouseArea{
  322.                                 anchors.fill: parent
  323.                                 onClicked: an_del.open()
  324.                             }
  325.                         }
  326.                     }
  327.                 }
  328.             }
  329.         }
  330.  
  331.         IsDelDialog{id:an_del;x:SSTPWind.width/2;y:SSTPWind.height/2;}
  332.         Connections{
  333.             target: an_del.del_area;
  334.             onClicked:{
  335.                 //anAirModel.remove(thelist.currentIndex)
  336.                 sstpModel.remove(thelist.currentIndex)
  337.                 an_del.close()
  338.             }
  339.         }
  340.     }

关于拖拽，参考https://blog.csdn.net/zhengtianzuo06/article/details/78631977，由于设置交互事件，会影响鼠标滚动和拖拽，所以进行了修改

  1. interactive: !isClicked

这样就不会影响拖拽和鼠标滚动了。

QML学习笔记（七）— 实现可拖拽、编辑、选中的ListView的更多相关文章

  1. Bootstrap学习笔记之Nestable可拖拽树结构

    Nestable是基于Bootstrap的一个可拖拽的树结构表现插件. 下面粗略的介绍一下它的用法,只作为学习参考,如有不合适之处,请各位凑合看. 下图是我在现在系统中用到的Nestable,对系统模 ...

  2. OpenLayers学习笔记（六）— 拖拽叠加层overlayer

    是在官网例子基础上增加的拖拽功能 GitHub:八至 作者:狐狸家的鱼 本文链接:拖拽叠加层overlayer 全部代码 <!DOCTYPE html> <html> < ...

  3. OpenLayers学习笔记（五）— 拖拽Feature图层

    参考文档的例子可以知道如何拖动矢量图层feature GitHub: 八至 作者:狐狸家的鱼 本文链接:拖拽Feature图层 全部代码 <!DOCTYPE html> <html& ...

  4. （转）Qt Model/View 学习笔记 (七)——Delegate类

    Qt Model/View 学习笔记 (七) Delegate  类 概念 与MVC模式不同,model/view结构没有用于与用户交互的完全独立的组件.一般来讲, view负责把数据展示 给用户,也 ...

  5. Learning ROS for Robotics Programming Second Edition学习笔记(七) indigo PCL xtion pro live

    中文译著已经出版,详情请参考:http://blog.csdn.net/ZhangRelay/article/category/6506865 Learning ROS forRobotics Pro ...

  6. QML学习笔记（六）- 简单计时器和定时器

    做一个简单的qml计时器和定时器,左键触发计时,右键触发定时 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(六)- 简单计时器和定时器 左键点击按钮,触发计时器,中键可以暂停计时,同 ...

  7. QML学习笔记（五）— 做一个简单的待做事项列表

    做一个简单的QML待做事项列表,能够动态添加和删除和编辑数据 GitHub:八至 作者:狐狸家的鱼 本文链接:QML学习笔记(五)— 做一个待做事项列表 主要用到QML:ListView 效果 全部代 ...

  8. Typescript 学习笔记七：泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. python3.4学习笔记(七) 学习网站博客推荐

    python3.4学习笔记(七) 学习网站博客推荐 深入 Python 3http://sebug.net/paper/books/dive-into-python3/<深入 Python 3& ...

  10. Go语言学习笔记七： 函数

    Go语言学习笔记七: 函数 Go语言有函数还有方法,神奇不.这有点像python了. 函数定义 func function_name( [parameter list] ) [return_types ...

随机推荐

  1. CentOS7 下面安装jdk1.8

    1. 卸载已有的jdk rpm -qa |grep jdk |xargs rpm -e --nodeps 2. 使用xftp上传 jdk 的文件我这里上传的是 jdk-8u121-linux-x64. ...

  2. [转帖]oracle改版sql server问题点汇总

    https://www.cnblogs.com/zhangdk/p/oracle_sqlserver.html 只记得 最开始的时候看过 没有具体的了解里面的特点 原作者总结的很好 留下来 以后说不定 ...

  3. vue的地图插件amap

    https://www.jianshu.com/p/0011996b81e2(amap) npm install vue-amap --save

  4. Microsoft Visual Studio Ultimate 2013密钥

    Visual Studio Ultimate 2013 KEY(密钥):BWG7X-J98B3-W34RT-33B3R-JVYW9Visual Studio Premium 2013 KEY(密钥): ...

  5. linux之硬盘管理fdisk

    1.首先我们用虚拟机模拟服务器加入一块新的硬盘,硬盘容量入下图5GB硬盘. 2.首先我们要对它进行分区,我们从上面知道需要分区格式化的是第二块硬盘. 3.输入n回车是新建分区,p是主分区(只能建立4个 ...

  6. @Autowired 与@Resource的区别（详细）

    参考:@Autowired 与@Resource的区别(详细) spring不但支持自己定义的@Autowired注解,还支持几个由JSR-250规范定义的注解,它们分别是@Resource.@Pos ...

  7. js外部调用layui.use中的函数的写法

    layui模块化的写法固然不错,但也有让人不适应的一些地方 外部调用函数的写法就让人不太舒服 需要在函数名前面加上window这个前缀,就不太舒服 补充:window前缀,是全局变量的声明方式 如下: ...

  8. fiddler 学习笔记1-下载安装、开启、关闭抓包功能

    1 下载安装(安装于C盘之外的空间中) https://www.telerik.com/fiddler 2 开启抓包功能:安装后默认为开启状态 点击 file-capture 或左下角capture ...

  9. Missing artifact com.oracle:ojdbc6:jar:11.2.0.3 Maven中不能引入ojdbc解决方法，错误

    今天从服务器检出Maven项目的时候,遇到了一个问题,就是在pom.xml中引入ojdbc的jar包的时候出错了,提示是Missing artifact com.oracle:ojdbc6:jar:1 ...

  10. 二、core abp 数据库迁移

    一.数据库迁移-ABP(库) 1.配置链接数据库:  贴以下代码: { "ConnectionStrings": { "Default": "Serv ...