qml中,在ListView中添加滚轮无法展现最后几行数据的问题解决

这个是我困扰我数几个小时的问题,好不容易知道了如何在LIstView中添加滚轮,然而,当我鼠标滚轮到最后的时候,展现的总不是最后那几行数据,这真的很让人头大,还好有了这次经历,把这个问题记录下来,给那些在qml中遇到同样问题的人。
首先介绍我想要实现的功能:我通过过滤筛选出符合要求的数据条目,并将这些内容显示在界面的某个位置,我是通过ListView来展现这些数据。

原先代码:

column{
	anchors.fill: parent
	spacing: 25
	topPadding: 15
	
	Row{...
	}

	TextField{...
	}
	
	Rectangle{...
	}
	//以上是我用作筛选条件的控件
	Rectangle{
	id: rec
	height: root.height-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: 955//需要指定大小,否则会出现最后一条数据无法展现的问题(滚轮)
		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中一直没有确切的指定大小,确定完大小,在作滚轮操作的代码,我这里的问题就解决了。

你可能感兴趣的:(Qt学习,javascript,qt)