水笋烧肉

qmllistView添加滚动条

开发环境：window10Qt5.13.1

qmllistView在编程中⽤得⽐较⼴泛，元素多了，我们希望能够看到滚动条，并且可以托动，默认的listView是不带滚动条的，我们可以设

置al的属性，添加滚动条。

其中有⼏个属性也特别重要：

interactive:这个属性表⽰元素是否可以拖动，

orientation:设置列表的⽅向

clip：是否可裁剪，默认是fal,这个时候向上拖动会有⼀个项超出界限，所有⼀般设置为true

具体的代码⽰例如下：

importQtQuick2.13

2.13

ls2.12

Window{

visible:true

width:640

height:480

title:qsTr("HelloWorld")

Rectangle{

id:listRect

color:"green"

:parent

//菜单

ListModel{

id:listRouteModel

ListElement{titleText:qsTr("卤⽔鸡翅");titleColor:"white"}

ListElement{titleText:qsTr("夫妻肺⽚");titleColor:"white"}

ListElement{titleText:qsTr("糖醋⼩排");titleColor:"white"}

ListElement{titleText:qsTr("⾯拖⼤排");titleColor:"white"}

ListElement{titleText:qsTr("家乡蛋饺");titleColor:"white"}

ListElement{titleText:qsTr("腊味合蒸");titleColor:"white"}

ListElement{titleText:qsTr("⽔笋烧⾁");titleColor:"white"}

ListElement{titleText:qsTr("剁椒鸭块");titleColor:"white"}

ListElement{titleText:qsTr("粉蒸⼤⾁");titleColor:"white"}

ListElement{titleText:qsTr("梅菜烧⾁");titleColor:"white"}

ListElement{titleText:qsTr("双菇⾁⽚");titleColor:"white"}

ListElement{titleText:qsTr("红烧⼤⾁");titleColor:"white"}

ListElement{titleText:qsTr("黄⾖焖鸡");titleColor:"white"}

ListElement{titleText:qsTr("咖哩鸡块");titleColor:"white"}

ListElement{titleText:qsTr("茄汁排条");titleColor:"white"}

ListElement{titleText:qsTr("椒盐排条");titleColor:"white"}

ListElement{titleText:qsTr("⼩炒鸭块");titleColor:"white"}

ListElement{titleText:qsTr("蚝油⽜⾁");titleColor:"white"}

ListElement{titleText:qsTr("⿇辣翅根");titleColor:"white"}

ListElement{titleText:qsTr("杭椒⽜柳");titleColor:"white"}

ListElement{titleText:qsTr("清蒸咸⾁");titleColor:"white"}

}

ListView{

id:listRouteView

width:100;height:320

:;gin:50;

:;rgin:50

orientation:al//垂直列表

orientation:al//垂直列表

interactive:true;//元素可拖动

clip:true//

al:ScrollBar{

id:scrollBar

onActiveChanged:{

("onActiveChanged========================")

active=true;

}

leted:{

//="yellow"

//=true;

//=10;

("leted========================")

}

}

model:listRouteModel;

focus:true

delegate:tabDelegate

}

//Component

Component{

id:tabDelegate

Rectangle{

width:100;height:25;

color:(tIndex===index)?"blue":"transparent"

//标题

Text{

width:-3;height:25;

:;

rgin:0;

:

gin:0

ize:16;

color:(tIndex===index)?"red":titleColor

text:titleText

horizontalAlignment:Center;//⽂字⽔平居中对齐

verticalAlignment:Center;//⽂字垂直居中对齐

}

MouArea{

:parent

onClicked:{

tIndex=index

//("clickedtab================="+index)

//lectIndex(index)

("clickedcurrentIndex================"+tIndex)

}

}

}

}//endComponent

}

}

2020-03-25更新