Auto-Scrolling TextArea in QML Sailfish / Silica

1.3k Views Asked by At

Update: Possible solution at the bottom.

I am learning App development for Sailfish with very little prior experience in Qt/QML but some experience in other Toolkits (GTK, Tk, Motif, Xaw).

I am currently writing a dumb chat client (no protocoll, just send text over network.) I have the Talk/Chat page defined in QML as follows:

import QtQuick 2.0
import Sailfish.Silica 1.0

Page {
    id: talkPage

    PageHeader {
        id: header

        title: qsTr("Talk")

        width: parent.width
        anchors.top: parent.top
    }

    TextField {
        id: message

        placeholderText: qsTr("Type your Message...")

        width: parent.width
        anchors.bottom: parent.bottom

        EnterKey.onClicked: {
            log.text += "\n> " + text;
            text = "";
        }
    }

    TextArea {
        id: log

        readOnly: true
        wrapMode: TextEdit.Wrap

        width: parent.width
        anchors.top: header.bottom
        anchors.bottom: message.top

        text: qsTr("Talk log")
    }
}

You can now enter text in the message TextField and hit enter to add it to the log TextArea.

Question: How to I make the TextArea auto-scroll to the bottom each time a message is added to it.

Note that if I understand correctly, this is using Sailfish.Silica TextField, and this is different from standard (QtQuick.Components ?) So I cannot use log.append("\n> " + text); from QtQuick.Controls (which isn't available on Sailfish.)

A sollution in using C++ rather than Javascript/QML is fine to, since I'll need it to handle Networking anyway.

Thanks in advance for any suggestions!

Bonus Question: I tried arranging header, message and log in a Column previously, but didn't know how to make header and message keep their default height but make log expand to fill the screen. In GTK there is an expand property for this. Any hints?

Possible Solution: Put the TextArea inside a SilicaFlickable. For some reason TextArea is already scrollable without this extra step, but this way one can use scrollToBottom() and force the desired behavior. As a bonus, in this way we can add a nice scrollbar.

0

There are 0 best solutions below