QML学习笔记(七)— 实现可拖拽、编辑、选中的ListView

时间:2023-03-09 09:47:30
QML学习笔记(七)— 实现可拖拽、编辑、选中的ListView

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

GitHub:八至

作者:狐狸家的鱼

QML学习笔记(七)— 实现可拖拽、编辑、选中的ListView

这里是自己定义的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

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