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

1.思路

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

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

2.position分析

    Rectangle {
        id: logRectangle
        color: "#0c0d0d"
        width: parent.width
        anchors.top: functionBar.bottom
        anchors.bottom: parent.bottom

        ScrollView  {
            id: scrollView
            anchors.left: parent.left
            anchors.leftMargin: 20
            anchors.top: parent.top
            anchors.topMargin: 10
            anchors.right: parent.right
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 10
            clip: true

            ScrollBar.horizontal.policy: ScrollBar.AlwaysOff    // 禁用水平滚动
            ScrollBar.vertical: ScrollBar{                      // 自定义垂直方向ScrollView滚动条
                id:cusScrollBar
                anchors.top: scrollView.top
                anchors.bottom: scrollView.bottom
                anchors.right: scrollView.right
                
                onPositionChanged: {
                    // 打印下面3行信息,很容易搞明白3者之间的关系
                    console.log("scrollView: " + scrollView.contentHeight)
                    console.log("logRectangle: " + logRectangle.height)
                    console.log("position: " + position)
                }
            }

            Text {
                id: logText
                anchors.fill: parent
                text: "日志信息\n"
                color: "#FFFFFF"
                font.pixelSize: 18
                wrapMode: Text.WordWrap  // 多行显示
            }
        }
    }

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

logText.text += log

var position = (scrollView.contentHeight - logRectangle.height) / scrollView.contentHeight
scrollView.ScrollBar.vertical.position = position >= 0 ? position : 0