Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Struggles with Page/ScrollView/ColumnView centering and scrolling



  • 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.

    Home page

    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...

    Home page not scrolling

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

    Page1

    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.

    Page1 partial scroll



  • 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.