QML ScrollView does not scroll with TextArea - qml

Question

I'm trying to make a widget that has an image at the bottom, and text that populates from bottom-to-top. Here are three ASCII-art examples of the widget in action:
Text Line 3 ^
Text Line 4 |
Text Line 1 Text Line 5 |
Text Line 1 Text Line 2 Text Line 6 V
| ----------- | | ----------- | | ----------- |
| ----------- | | ----------- | | ----------- |
+-----------------+ +-----------------+ +-----------------+
| printer.svg | | printer.svg | | printer.svg |
+-----------------+ +-----------------+ +-----------------+
I'm having problems with the vertical spacing. It should be:
Image at bottom
TextArea should fill the rest of the space.
If there is too much text, a scroll bar should appear.
The objects needed are pretty clear:
ColumnLayout
+-- ScrollView
| +-- TextArea
+-- Image
But what combinations Layout alignments/heights/implicitHeights/contentHeights/anchors/position/policy can make this happen?
The closest I have gotten is below, and the commented-out stuff is what I've been brute-forcing.
import QtQuick 2.0
import QtQuick.Layouts 1.12
import QtQuick.Controls 2.5
ColumnLayout {
width: parent.width
height: parent.height
anchors.top: parent.top
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
ScrollView {
Layout.alignment: Qt.AlignBottom
Layout.maximumHeight: parent.height - rect.height
TextArea {
text:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla eleifend non leo
a iaculis. Nam at tortor mollis, iaculis justo vel, dictum sapien. Vivamus sed
feugiat tortor, nec tempor nisi. Orci varius natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Quisque vestibulum, eros id vehicula
eleifend, eros tellus iaculis lectus, sit amet molestie justo ex in nulla.
Maecenas at ultrices velit. Vestibulum eu libero tortor. Morbi ipsum lorem,
interdum sed aliquam quis, semper pretium ante. Duis et nibh ac tortor tincidunt
commodo. Vestibulum commodo nibh nisi, in lacinia lectus imperdiet vel. Class
aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos
himenaeos.
Aliquam erat volutpat. Praesent eget erat a nisi vulputate euismod. Donec in
vulputate tellus, eget dapibus eros. Quisque nec lacus iaculis, venenatis ante
quis, tincidunt ligula. Donec aliquet diam sit amet nisl sollicitudin, et varius
arcu lobortis. Aliquam erat volutpat. Duis enim justo, fringilla egestas
volutpat et, efficitur id erat. Duis et ullamcorper leo. Maecenas ornare orci
purus, ac commodo sapien malesuada eget. In dapibus ex nec risus laoreet
fringilla. Donec maximus elit in elit aliquam, eget imperdiet mauris congue.
Nunc libero quam, fringilla et mauris sit amet, consectetur convallis augue. Sed
vitae hendrerit ex, ac sollicitudin nibh. Donec diam mi, placerat vitae
venenatis vitae, lacinia at urna."
}
}
Rectangle { // Image placeholder
id: rect
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
width: 300
height: 100
color: "red"
}
}
In this case, I am using anchors to force the ColumnLayout to fill its container. Then, things like Layout.alignment: Qt.AlignBottom behave well. I found that if I don't specify ScrollView{ Layout.maximumHeight: }, then the scroll bar doesn't appear.
It works well in the online sandbox I'm playing in, but in practice it fails miserably That's because this widget is contained in a StackLayout. When I try to include my widget in the project, I get:
QML ColumnLayout: Detected anchors on an item that is managed by a layout. This is undefined behaviour; use Layout.alignment instead.
So I've tried combinations of these lines:
ColumnLayout {
Layout.alignment: Qt.AlignBottom
height: parent.height
But neither line had any effect. I think that's because the parent deduces its size from its children.
I'd prefer not to change the rest of the application, but if I reduce the rest of the application to parent components and properties, I get something that looks like this. Is it even possible for me to write a bottom-to-top widget in an application like this?
ApplicationWindow {
readonly property int base_width: 1920
readonly property int base_height: 1080
id: mainApplication
width: base_width*4/5
height: base_height*4/5
Rectangle {
id: iosMain
anchors.fill: parent
StackLayout
{
id: stackLayout
anchors.left: menuButtonsLayout.right
anchors.right: iosMain.right
anchors.top: iosMain.top
anchors.bottom: iosMain.bottom
Item {
id: pageRoot
Layout.fillWidth: false
Layout.fillHeight: false
transformOrigin: Item.TopLeft
width: childrenRect.width
height: childrenRect.height
RowLayout {
x: Style.pageLeftMargin
y: Style.pageTopMargin
StackLayout {
id: stackLayout
width: parent.width
currentIndex: 0
Layout.fillHeight: true
MyWidget{} // <-- This is where my widget lives
}
}
}
}
}
}

Answer 1

This is the solution I came up with, I hope it fits your needs. I basically wrapped the ScrollView in an Item in order to fill the hole upper ColumnLayout cell via the attached property Layout.fillHeight. Then I use the height of the Item to place the ScrollView inside of it. First it is placed at the bottom until it grows bigger than the Item.
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Window {
id: root
width: 480
height: 320
visible: true
color: "white"
Timer {
interval: 500
running: true
repeat: true
onTriggered: {
textArea.text += "\nTip Tip Tip " + Date().toString()
// scroll to bottom when text was added
scrollView.ScrollBar.vertical.position = 1.0 - scrollView.ScrollBar.vertical.size
}
}
StackLayout {
anchors.fill: parent
currentIndex: 0
ColumnLayout {
Layout.fillWidth: true
Layout.fillHeight: true
Item {
id: frame
Layout.minimumWidth: 100
Layout.maximumWidth: 800
Layout.preferredWidth: image.paintedWidth
Layout.alignment: Qt.AlignHCenter
Layout.fillHeight: true
ScrollView {
id: scrollView
anchors.bottom: parent.bottom
width: parent.width
height: frame.height < scrollView.contentHeight ? frame.height : scrollView.contentHeight
TextArea {
id: textArea
color: "black"
text: "Typewriter Tip Tip Tip"
background: Rectangle {
border.color: "black"
}
}
}
}
Image {
id: image
Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
Layout.fillWidth: true
Layout.minimumHeight: 100
Layout.maximumHeight: 400
source: "https://picsum.photos/300/100"
fillMode: Image.PreserveAspectFit
}
}
}
}