QML ScrollView 实现自动滚动到底部

本文主要是介绍QML ScrollView 实现自动滚动到底部，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

先看效果,每当有新的日志,会自动添加到Text中,主要实现了ScrollView自动滑动到底部,显示最新的日志

1.思路

在官网中scrollview并没有关于scrollview位置的设置
但是我们可以控制右边滑动条scrollbar的位置

注意position并不是一个高度数据,你可以理解为是一个百分比

2.position分析

    Rectangle {id: logRectanglecolor: "#0c0d0d"width: parent.widthheight: 360ScrollView  {id: scrollViewanchors.left: parent.leftanchors.leftMargin: 20anchors.top: parent.topanchors.topMargin: 10anchors.right: parent.rightanchors.bottom: parent.bottomanchors.bottomMargin: 10clip: trueScrollBar.horizontal.policy: ScrollBar.AlwaysOff    // 禁用水平滚动ScrollBar.vertical: ScrollBar{                      // 自定义垂直方向ScrollView滚动条id:cusScrollBaranchors.top: scrollView.topanchors.bottom: scrollView.bottomanchors.right: scrollView.rightonPositionChanged: {// 打印下面3行信息,很容易搞明白3者之间的关系console.log("scrollView: " + scrollView.contentHeight)console.log("logRectangle: " + logRectangle.height)console.log("position: " + position)}}Text {id: logTextanchors.fill: parenttext: "日志信息\n"color: "#FFFFFF"font.pixelSize: 18wrapMode: Text.WordWrap  // 多行显示}}}

在需要的地方添加log日志,并且修改滑块的位置

logText.text += logvar position = (scrollView.contentHeight - logRectangle.height) / scrollView.contentHeight
scrollView.ScrollBar.vertical.position = position >= 0 ? position : 0

这篇关于QML ScrollView 实现自动滚动到底部的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---