这个是我困扰我数几个小时的问题,好不容易知道了如何在LIstView中添加滚轮,然而,当我鼠标滚轮到最后的时候,展现的总不是最后那几行数据,这真的很让人头大,还好有了这次经历,把这个问题记录下来,给那些在qml中遇到同样问题的人。
首先介绍我想要实现的功能:我通过过滤筛选出符合要求的数据条目,并将这些内容显示在界面的某个位置,我是通过ListView来展现这些数据。
原先代码:
column{
anchors.fill: parent
spacing: 25
topPadding: 15
Row{...
}
TextField{...
}
Rectangle{...
}
//以上是我用作筛选条件的控件
Rectangle{
id: rec//root.height
height: 1000-a.height-b.height
width: root
ListView {
id: listview
width: parent.width
height: parent.height
anchors.horizontalCenter: listRect.horizontalCenter
//new added(滚轮)
orientation: listview.Vertical
clip: true
interactive: true
ScrollBar.vertical: ScrollBar {
id: scrollBar
onActiveChanged: {
console.log("onActiveChanged========================")
active = true;
}
Component.onCompleted: {
console.log("Component.onCompleted========================")
}
}
focus: true
//end added
model: itemModel
delegate: Item {。。。}
}
}}
运行效果描述:
当数据的内容条数超过了ListView已设定的最大值。当使用滚轮时,会将其范围内的数据依次作展现;当我们把滚轮滚到最后时,点击向上拖,可以看到有几条数据一直隐藏在最下面,只有拖动才看得见,松开鼠标,它们又移到最后去了。
更改后的代码:
column{
anchors.fill: parent
spacing: 25
topPadding: 15
Row{...
}
TextField{...
}
Rectangle{...
}
//以上是我用作筛选条件的控件
Rectangle{
id: listRect
color: "transparent"//"green"
height: root.height-200//不要给定值,否则会出现最后一条数据无法展现的问题(界面缩放时),因为高度定死(滚轮)
width: 274
ListView {
id: listview
width: parent.width
height: parent.height
anchors.horizontalCenter: listRect.horizontalCenter
//new added(滚轮)
orientation: listview.Vertical
clip: true
interactive: true
ScrollBar.vertical: ScrollBar {
id: scrollBar
onActiveChanged: {
console.log("onActiveChanged========================")
active = true;
}
Component.onCompleted: {
console.log("Component.onCompleted========================")
}
}
focus: true
//end added
model: itemModel
delegate: Item {...}
}
}
}
}
我一直不成功的原因,是在Rectangle中一直没有确切的指定大小。其次,由于我设置了界面可以最大最小化变动,所以界面的height需要实时获取,不能定死。否则,容易出现我之前遇到的问题。