Important: Please read the Qt Code of Conduct -

Making a logging Window which automatically scrolls to end and allows to select text

  • Hi,

    The problem is that I want to create a window which is logging something. Updates will probably be every 0.1 to 2 seconds. I thought I do this via making a TextEdit which I put inside a Flickable or ScrollView. The content should be selectable via mouse and copyable to clipboard (which TextEdit already provides). If a new line is added, the view should scroll to the bottom, so that the new line will always be visible.

    I tried the following solution:
    Here, the TextEdit is put inside a Flickable, and ScrollView, and contentY is set automatically. The scrolling works fine, but it seems that placing the TextEdit into a Flickable makes it impossible to select text.

    The other solution I tried was

    ScrollView {
                    id: view
                    anchors.fill: parent
                    wheelEnabled: true
                    ScrollBar.vertical.policy: ScrollBar.AlwaysOn
                    TextEdit {
                        id: t
                        focus: true
                        anchors.fill: parent
                        text: root.log
                        readOnly: true
                        font.pointSize: 10
                        selectByMouse: true

    which makes the text selectable, but I would not know how to set the scroll position of the ScrollBar. I tried

    onogChanged: {

    but this would not change the view position.

    So how can this be done?

  • @maxwell31 hi,
    i did it once with ListView

    import QtQuick 2.12
    import QtQuick.Window 2.12
    import QtQuick.Controls 2.12
    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("AutoScroll")
        ListModel {
            id: myModel
            ListElement { message: "a message..."; severity: 0 }
        Component {
            id: myDelegate
            TextInput {
                selectByMouse: true
                text: message + ", " + "severity : " + severity
                color: severity > 5 ? "red" : "black"
        ListView {
            height: parent.height*0.8
            width: parent.width/2
            anchors.verticalCenter: parent.verticalCenter
            model: myModel
            delegate: myDelegate
            property int msgCount: 0
            onMsgCountChanged: lst.positionViewAtEnd()
            anchors.left: lst.right
            text: "add message"
            onClicked: {
                myModel.append({message : "new message " + msgCount, severity : Math.round(Math.random()*10)})

  • You can use flickable attached property of TextArea. When TextArea attached that way to a flickable it can automatiacally scroll to an end when some text appended to a TextArea. Simple example:

    Window {
        visible: true
        width: 640
        height: 480
        title: qsTr("Hello World")
        Flickable {
            anchors.fill: parent
            boundsBehavior: Flickable.StopAtBounds
            ScrollBar.vertical: ScrollBar {}
            TextArea.flickable: TextArea {
                id: area
        Timer {
            running: true
            interval: 1000
            repeat: true
            property int iteration: 0
            onTriggered: area.append("Line %1".arg(iteration++))

  • Thanks for your suggestions. I know did the solution using TextArea.flickable and it works as it should. It is strange, that it is not working for TextEdit.

Log in to reply