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
             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
                     5
                    height: sstpDelegate.height
                    color: index===thelist.currentIndex ? Global.GlobalVar.sstpCurIndex : Global.GlobalVar.mainFontColor//选中颜色设置
                }
                Rectangle{//info
                    id:infoRect
                     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
                     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

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