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
这样就不会影响拖拽和鼠标滚动了。
