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.