How to get ScrollView to scroll when children are reparented into it?

[Pradeep P N]

@Vadi2
There is an explanation from @Shrinidhi-Upadhyaya with sample code.
You can check the code once by using his examples.

Below is height fix for your TextArea

[Vadi2]

I've applied the changes, but I can't see any text anymore in the expanded state - did I mess up somewhere?

import QtQuick 2.7
import QtQuick.Controls 2.5
import QtQuick.Controls.Material 2.0
import QtQuick.Window 2.10
import QtQuick.Controls.Universal 2.12
import QtQuick.Layouts 1.12
import 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


        Flickable {
            id: addResourceFlickable
            contentHeight: textArea.contentHeight; width: parent.width;
            visible: textArea.state === "EXPANDED"
            clip: true
            flickableDirection: Flickable.VerticalFlick
        }

        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
                onParentChanged: { textArea.forceActiveFocus(); }

                states: [
                    State {
                        name: "MINIMAL"; when: !textArea.text
                        ParentChange {
                            target: textArea
                            parent: loadResourcesRow
                            width: 300
                            height: undefined
                        }
                        PropertyChanges {
                            target: loadResourcesRow
                            y: hammerLabel.y + 80
                            x: 0
                        }
                    },
                    State {
                        name: "EXPANDED"; when: textArea.text
                        ParentChange {
                            target: textArea
                            parent: addResourceFlickable.contentItem
                            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: {
                textArea.state = "MINIMAL"
                addResourcesPage.state = "EDITING_SETTINGS"
            }
        }

        Button {
            id: actionButton
            text: "stuff"
            visible: textArea.text || addResourcesPage.state === "EDITING_SETTINGS"
            Layout.fillWidth: true
        }
    }
}

[Shrinidhi Upadhyaya]

Hi @Vadi2 , you need to specify the height for the flickable, you have missed it.
Add inside flickable:-

height: parent.height

[Pradeep P N]

@Vadi2

Below is the code. Yes as @Shrinidhi-Upadhyaya mentioned You did miss the height in

Flickable {}

Below is the code.

    Page {
        id: addResourcesPage

        width: window.width
        height: window.height - buttonsRow.height

        Flickable {
            id: addResourceFlickable

            clip: true
            width: parent.width;
            height: parent.height;
            contentHeight: textArea.contentHeight;
            visible: textArea.state === "EXPANDED"
            flickableDirection: Flickable.VerticalFlick
        }

        Label {
            id: hammerLabel

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

        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"

                states: [
                    State {
                        name: "MINIMAL"; when: !textArea.text
                        ParentChange {
                            target: textArea
                            parent: loadResourcesRow
                            width: 300
                            height: undefined
                        }
                        PropertyChanges {
                            target: loadResourcesRow
                            y: hammerLabel.y + 80
                            x: 0
                        }
                    },
                    State {
                        name: "EXPANDED"; when: textArea.text
                        ParentChange {
                            target: textArea
                            parent: addResourceFlickable.contentItem
                            x: 0; y: 0
                            width: window.width
                            height: window.height - buttonsRow.height
                        }
                    }
                ]
                state: "MINIMAL"

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

                // ensure focus remains when the area is reparented
                onParentChanged: { textArea.forceActiveFocus(); }
            }
        }

        Text {
            id: experimentalText

            anchors {
                horizontalCenter: parent.horizontalCenter
                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 === "EDITING_SETTINGS"
            Layout.fillWidth: true
        }
    }

[Vadi2]

Thanks so much! It does size back down normally now. I did miss setting the Flickable's height.

How can I get the Flickable to scroll my TextArea's content though, instead of scrolling the whole TextArea itself?

[Vadi2]

Any ideas on this? Still not able to solve the original problem - I've tried just about everything :(