鼠標單擊可選中當前項，頭部呈綠色顯示；按壓當前項可進行拖拽更換列表項位置；點擊數據可以進行編輯；
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
這樣就不會影響拖拽和鼠標滾動了。