Struggles with Page/ScrollView/ColumnView centering and scrolling

[Chris Jennings]

Learning QML. Trying to understand how to make an app with StackView that has a ScrollView for each Page, and use ColumnLayout to make forms that center on the screen and get scrolling with clipping when the screen is small.

My main concern is layout, but I'm pretty sure there are other problems with my code. So I'd be happy for any critiques.

The project is on gitlab: https://gitlab.com/christoferjennings/qml-experiments

The project README includes some questions and screen-shots.

The Home page shows the layout that I want, but I kludged an invisible Rectangle in it to make it work.

Code for home page... notice the dumb Rectangle. I've tried to not have it, but never got the page to show up properly without it.
Also, I must be doing something wrong with the ScrollView and ColumnLayout because the scrolling doesn't work at all (nee next picture)

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Page {
    title: qsTr("Home")


    /* This ScrollView doesn't do what I think it should do.
     * I want it to scroll the whole page but on this page it does nothing.
     */
    ScrollView {
        id: scroll_view
        clip: true
        width: parent.width
        height: parent.height

        ColumnLayout {
            id: the_column
            spacing: 20
            width: Math.max(scroll_view.width * 0.8, 300)
            implicitWidth: width
            implicitHeight: Label.height + label2.height + btn.height + (2 * spacing)

            anchors.top: parent.top
            anchors.topMargin: 64
            anchors.horizontalCenter: parent.horizontalCenter

            FancyTextField {
                id: label1
                label: qsTr("This")
                placeholderText: qsTr("type something")
                Layout.fillWidth: true
            }
            FancyTextField {
                id: label2
                label: qsTr("That")
                placeholderText: qsTr("type something else")
                Layout.fillWidth: true
            }
            Button {
                id: btn
                text: "doit"
                Layout.alignment: Qt.AlignCenter
            }
        }

        /* This dumb Rectangle makes the layout center correctly. Why? */
        Rectangle {}
    }
}

Here's the home page failing to scroll...

Compare all that to Page1. This is how Page1 shows up (not centered)

And Page1's code... only real difference is that the Rectangle is comment out.)

import QtQuick 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12

Page {
    title: qsTr("Page 1: What happened?")


    /* This ScrollView doesn't do what I think it should do.
     * I want it to scroll the whole page but on this page it only does the text fields.
     */
    ScrollView {
        id: scroll_view
        clip: true
        width: parent.width
        height: parent.height

        ColumnLayout {
            id: the_column
            spacing: 20
            width: Math.max(scroll_view.width * 0.8, 300)
            implicitWidth: width
            implicitHeight: Label.height + label2.height + btn.height + (2 * spacing)

            anchors.top: parent.top
            anchors.topMargin: 64
            anchors.horizontalCenter: parent.horizontalCenter

            FancyTextField {
                id: label1
                label: qsTr("This")
                placeholderText: qsTr("type something")
                Layout.fillWidth: true
            }
            FancyTextField {
                id: label2
                label: qsTr("That")
                placeholderText: qsTr("type something else")
                Layout.fillWidth: true
            }
            Button {
                id: btn
                text: "doit"
                Layout.alignment: Qt.AlignCenter
            }
        }

        /* This dumb Rectangle makes the layout center correctly. Why? */
        //Rectangle {}
    }
}

And Page1's partial scrolling. Notice the scrollbars. It won't scroll vertically enough to show everything.

[Pendletonic]

Hello!

I think what is missing is a specification of the contentWidth and contentHeight of the ScrollView. The reason this breaks in the main case is because ColumnLayout has no default width/height. In spite of your specification of an implicitHeight and implicitWidth the ScrollView still must have the content sizes specified manually.

So adding:

contentWidth: parent.width
contentHeight: the_column.height

to the ScrollView resolves the issues.