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

这个是我困扰我数几个小时的问题,好不容易知道了如何在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需要实时获取,不能定死。否则,容易出现我之前遇到的问题。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值