QML ScrollBar如何一直保持到最底部

一、效果查看

二、源码分享

import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Basic

Window {
    width: 1300
    height: 850
    visible: true
    minimumHeight: 850
    minimumWidth: 1300
    title: qsTr("日志查看")

    ColumnLayout {
        id: columnLayout
        anchors.fill: parent
        spacing: 0
        Row {
            id: row
            Layout.preferredHeight: parent.height/30
            Layout.fillWidth: true
            spacing: 5

            CheckBox {
                id: checkBoxLook
                width: 100
                height: 28
                text: qsTr("查看")
                checked: true
                anchors.verticalCenter: parent.verticalCenter
                background: Rectangle{
                    anchors.fill: parent
                    radius: parent.width/2
                    color:"steelblue"
                }
                indicator:Item{
                    width: parent.height-5
                    height: parent.height-5
                    anchors.verticalCenter: parent.verticalCenter
                    x:3
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        border.width: 3
                        border.color: "white"
                        color:parent.parent.checked?"green":"white"
                    }
                }
                contentItem: Text{
                    leftPadding: parent.indicator.width*2
                    anchors.fill: parent
                    text:parent.text
                    color:parent.checked?"white":"black"
                    font.pixelSize: parent.font.pixelSize
                    verticalAlignment: Text.AlignVCenter
                   // horizontalAlignment: Text.AlignHCenter
                }
            }

            CheckBox {
                id: checkBoxSave
                width: 100
                height: 28
                text: qsTr("保存")
                checked: true
                anchors.verticalCenter: parent.verticalCenter
                background: Rectangle{
                    anchors.fill: parent
                    radius: parent.width/2
                    color:"steelblue"
                }
                indicator:Item{
                    width: parent.height-5
                    height: parent.height-5
                    anchors.verticalCenter: parent.verticalCenter
                    x:3
                    Rectangle{
                        anchors.fill: parent
                        radius: width/2
                        border.width: 3
                        border.color: "white"
                        color:parent.parent.checked?"green":"white"
                    }
                }
                contentItem: Text{
                    leftPadding: parent.indicator.width*2
                    anchors.fill: parent
                    text:parent.text
                    color:parent.checked?"white":"black"
                    font.pixelSize: parent.font.pixelSize
                    verticalAlignment: Text.AlignVCenter
                   // horizontalAlignment: Text.AlignHCenter
                }
            }

            Button {
                id: btnClear
                width: 100
                height: 28
                text: qsTr("清空")
                anchors.verticalCenter: parent.verticalCenter
                background: Rectangle{
                    anchors.fill: parent
                    radius: 10
                    border.width: 1
                    color:btnClear.pressed?"lightblue":btnClear.hovered?"dodgerblue":"steelblue"
                }
                onClicked: {
                    textArea.clear()
                }
            }
        }
        ScrollView {
            id:scrollView
            Layout.fillHeight: true
            Layout.fillWidth: true
            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
                policy: ScrollBar.AlwaysOn
            }
            TextArea {
                id: textArea
                color: "#0dfe3c"
                wrapMode: Text.WordWrap
                readOnly: true
                selectedTextColor: "#f9faf9"
                background: Rectangle{
                    //anchors.fill: parent
                    color:"black"
                }
            }
        }

    }
    function appendText(txt)
    {
        if(checkBoxLook.checked)
        {
            textArea.append(txt)
            var position = (scrollView.contentHeight - columnLayout.height+40) / scrollView.contentHeight
            scrollView.ScrollBar.vertical.position = position >= 0 ? position : 0
        }
    }

}

三、解析

首先定义ScrollBar

ScrollBar.vertical: ScrollBar{                      // 自定义垂直方向ScrollView滚动条
   id:cusScrollBar
   anchors.top: scrollView.top
   anchors.bottom: scrollView.bottom
   anchors.right: scrollView.right
   policy: ScrollBar.AlwaysOn
}

然后再添加内容的过程中改变ScrollBar的位置

    function appendText(txt)
    {
        if(checkBoxLook.checked)
        {
            textArea.append(txt)
            var position = (scrollView.contentHeight - columnLayout.height+40) / scrollView.contentHeight
            scrollView.ScrollBar.vertical.position = position >= 0 ? position : 0
        }
    }