[Interest] How to get QML ScrollView to scroll when children are reparented into it?

Vadim Peretokin vperetokin at gmail.com
Thu May 30 07:10:50 CEST 2019

I'm reparenting a TextArea into a ScrollView - somewhat unsuccessfully,
because the said ScrollView then refuses to scroll.

What is the right way to go about it? I've stripped the problem down to a
small, reproducible usecase here:

And here is the qml file inside that zip in full. I was told that 'parent:
addResourceScrollView' is the issue, but changing that just lead to a host
of issues that lead down a rabbit hole.

import QtQuick 2.7import QtQuick.Controls 2.5import
QtQuick.Controls.Material 2.0import QtQuick.Window 2.10import
QtQuick.Controls.Universal 2.12import QtQuick.Layouts 1.12import
QtQuick.Dialogs 1.3

ApplicationWindow {
    id: window
    visible: true
    width: 640; height: 480
    minimumWidth: 550; minimumHeight: 300
    title: qsTr("Hammer")

    Page {
        id: addResourcesPage
        width: window.width
        height: window.height - buttonsRow.height

        ScrollView {
            id: addResourceScrollView
            height: parent.height; width: parent.width;
            visible: textArea.state === "EXPANDED"
            clip: true

            onContentHeightChanged: console.log(`content height changed`)
            onContentChildrenChanged: console.log(`children changed;
now have: ${children.length}`)
            onChildrenRectChanged: console.log(`children rect changed`)

        Label {
            id: hammerLabel
            anchors.horizontalCenter: parent.horizontalCenter
            y: 120
            text: qsTr("🔨 Hammer")
            font.bold: true
            opacity: 0.6
            font.pointSize: 36
            font.family: "Apple Color Emoji"
            visible: textArea.state === "MINIMAL"

        Row {
            id: loadResourcesRow
            y: hammerLabel.y + 80
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: 10

            Button {
                id: loadResourceButton
                text: qsTr("Button")
                visible: textArea.state === "MINIMAL"

            TextArea {
                id: textArea
                placeholderText: qsTr("or load it here")
                renderType: Text.NativeRendering
                // ensure the tooltip isn't monospace, only the text
                font.family: text ? "Ubuntu Mono" : "Ubuntu"
                selectByMouse: true
                wrapMode: "WrapAtWordBoundaryOrAnywhere"

                // ensure focus remains when the area is reparented
                onWidthChanged: textArea.forceActiveFocus()
                // it doesn't have focus on startup
                Component.onCompleted: textArea.focus = false

                states: [
                    State {
                        name: "MINIMAL"; when: !textArea.text
                        ParentChange {
                            target: textArea
                            parent: loadResourcesRow
                            width: 300
                            height: undefined
                    State {
                        name: "EXPANDED"; when: textArea.text
                        ParentChange {
                            target: textArea
                            parent: addResourceScrollView
                            x: 0; y: 0
                            width: window.width
                            height: window.height
                state: "MINIMAL"

                transitions: Transition {
                    ParentAnimation {
                        NumberAnimation { properties:
"x,y,width,height";  easing.type: Easing.InCubic; duration: 600 }


        Text {
            id: experimentalText
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            text: qsTr("Experimental")
            enabled: false
            z: 0
            rotation: -45
            opacity: 0.1
            font.pixelSize: 96


    RowLayout {
        id: buttonsRow
        x: 0
        y: parent.height - height
        width: window.width

        Button {
            id: settingsButton
            text: "☰"

            onClicked: addResourcesPage.state = "EDITING_SETTINGS"

        Button {
            id: actionButton
            text: "stuff"
            visible: textArea.text || addResourcesPage.state ===
            Layout.fillWidth: true
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190530/d449108a/attachment.html>

More information about the Interest mailing list