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

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的更多相关文章

  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. mysql实现首字母从A-Z排序

    1.常规排序ASC DESC ASC 正序 DESC倒叙 -- 此处不用多讲 2.自定义排序 自定义排序是根据自己想要的特定字符串(数字)顺序进行排序.主要是使用函数 FIELD(str,str1,s ...

  2. Day 4-1 模块的导入方法和路径

    什么是模块? 在计算机程序的开发过程中,随着程序代码越写越多,在一个文件里代码就会越来越长,越来越不容易维护. 为了编写可维护的代码,我们把很多函数分组,分别放到不同的文件里,这样,每个文件包含的代码 ...

  3. IIS下载地址

    https://www.microsoft.com/zh-cn/download/confirmation.aspx?id=1038

  4. js发布订阅模式实现

    //可以用于无相关页面或组件的事件.数据传递,减少在onShow中的业务,降低代码耦合 let events = {} /**订阅**/ function on(name, self, callbac ...

  5. png8、16、24、32位的区别

    我们都知道一张图片可以保存为很多种不同的格式,比如bmp/png/jpeg/gif等等.这个是从文件格式的角度看,我们抛开文件格式,看图片本身,我们可以分为8位, 16位, 24位, 32位等. 单击 ...

  6. ECharts在柱状图的柱子上方显示数量的方法

    在setOption()方法中的series配置中加上itemStyle配置 如下: series: [{ name: '人数', type: 'bar', data: [], //x轴对应列的值 i ...

  7. delphi中如何实现DBGrid中的两列数据想减并存入另一列

    可参考下面的例子:   数据自动计算的实现:“金额”是由“单价”和“工程量”相乘直接得来的,勿需人工输入. 这可在“数据源构件”的onupdatedata例程添加如下代码实现: procedure T ...

  8. Lodop控件NewPage();测试输出空白页

    LODOP.NewPage();和LODOP.NewPageA();是强制分页语句,两者的区别可查看本博客的相关博文:Lodop强制分页LODOP.NewPage()和LODOP.NewPageA() ...

  9. Windows7 (Win7) 配置Windows Update 时失败 正在还原更改

    用WinPE启动后,进入Windows\WinSxS目录,想办法删掉pending.xml和reboot.xml

  10. 前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构

    前后端进行数据交互时候 要优先考虑json格式即简直对形式,[{}] 列表形式 等便于操作的数据结构