How to have Text that wraps, has a maximum height, and becomes scrollable if the text goes over that maxiumum height? - qt

Question

I'm trying to set up a Text component that has a maximum height of the window's height divided by three. The source of the text gives it as a single line, so it also needs to wrap once its width exceeds that of the window. Finally, I'd like the text to become scrollable if its height exceeds 1/3 of the window's.
I've also got a ListView below it, and I want the top of the ListView to be right at the bottom of the Text.
So far, I've come up with this:
ColumnLayout {
anchors.fill: parent
// anchors.margins: 10
ScrollView {
id: descriptionBox
clip: true
Layout.fillWidth: true
Layout.preferredHeight: parent.height / 3
contentWidth: parent.width
Text {
id: descriptionBoxLabel
text: "Eum id neque possimus inventore similique. Et dolores exercitationem vel dignissimos. Voluptatibus assumenda veniam consequuntur. Harum reprehenderit tempora nostrum. Assumenda unde omnis non sit minima voluptas eligendi eum."
anchors.left: parent.left
anchors.right: parent.right
wrapMode: Text.WordWrap
}
}
ListView {
id: useListView
model: ["Apple", "Banana", "Pear", "Watermelon"]
delegate: CheckDelegate {
text: modelData
width: Window.width - 20
}
Layout.fillWidth: true
Layout.fillHeight: true
}
}
This kind of works, but the Text doesn't become scrollable when I shrink the height of the window, and the top of the ListView isn't lined up with the bottom of the Text.

Answer 1

I am not sure what the original issue is, but, I reworked it to use a Flickable instead of a ScrollView. The difference being you have to be meticulous in setting contentWidth and contentHeight correctly for the ScrollBar to work. I also tweaked the width calculation of your ListView delegate to follow the width of the ListView:
import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
Page {
ColumnLayout {
anchors.fill: parent
Flickable {
id: descriptionBox
Layout.fillWidth: true
Layout.preferredHeight: Math.min(parent.height / 3, frame.height)
clip: true
contentWidth: frame.width
contentHeight: frame.height
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
Frame {
id: frame
width: descriptionBox.width - 20
Text {
id: descriptionBoxLabel
text: "Eum id neque possimus inventore similique. Et dolores exercitationem vel dignissimos. Voluptatibus assumenda veniam consequuntur. Harum reprehenderit tempora nostrum. Assumenda unde omnis non sit minima voluptas eligendi eum."
width: parent.width
wrapMode: Text.WordWrap
}
}
}
ListView {
id: useListView
Layout.fillWidth: true
Layout.fillHeight: true
model: ["Apple", "Banana", "Pear", "Watermelon"]
delegate: CheckDelegate {
text: modelData
width: ListView.view.width - 20
}
ScrollBar.vertical: ScrollBar {
width: 20
policy: ScrollBar.AlwaysOn
}
}
}
}
You can Try it Online!
[EDIT]
To eliminate the white space, modified the Layout height with:
Layout.preferredHeight: Math.min(parent.height / 3, frame.height)