ScrollView doesn't scrolling

[Mitya]

Hi to everyone.

I'm trying to set a scrollview on one of my application pages to hold number of fields. Fields are been shown but scroll doesn't work. What I'm doing wrong.

My code is shown below

import QtQuick 2.9
import QtQuick.Window 2.3
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.11

Page {
id: userPage
width: Screen.width / 2
height: Screen.height / 2

header: Label {
    id: headerLabel
    text: "User"
    horizontalAlignment: Text.AlignHCenter
    font.pixelSize: Qt.application.font.pixelSize * 2
    padding: 10
}
ScrollView {
    id: scrollView
    anchors.fill: parent
    anchors.margins: 10
    clip: true
    Rectangle {
        id: userPageContent
        Rectangle {
            id: userName
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: parent.top
            anchors.topMargin: 10
        }
        Rectangle {
            id: userSurname
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: userName.bottom
            anchors.topMargin: 10
        }
        Rectangle {
            id: userEmail
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: userSurname.bottom
            anchors.topMargin: 10
        }
        Rectangle {
            id: userBirthDate
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: userEmail.bottom
            anchors.topMargin: 10
        }
        Rectangle {
            id: userWeightHeightBmi
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: userBirthDate.bottom
            anchors.topMargin: 10
        }
        Rectangle {
            id: userPump
            width: scrollView.width
            height: userPage.height / 6
            color: "#ee3030"
            anchors.top: userWeightHeightBmi.bottom
            anchors.topMargin: 10
        }
    }
}

}

[Diracsbracket]

Hi @Mitya,

You can correct your code by specifying the implicit size of your userPageContent element:

Rectangle {
    id: userPageContent
    implicitHeight: childrenRect.height
    implicitWidth: childrenRect.width
   ...
}

Note: setting the height and width of userPageContent instead does not work, you really need to set the implicit size.

The reason for this is explained in:
https://doc.qt.io/qt-5.11/qml-qtquick-controls2-scrollview.html
which is the correct page if you use Quick.Controls 2.x, since you use:

import QtQuick.Controls 2.2

I suspect that you may have been looking at:
http://doc.qt.io/qt-5/qml-qtquick-controls-scrollview.html
which is for version 1.

I found this so confusing when I first learned QML...
So, always check this line at the top of the doc pages:

Import Statement:	import QtQuick.Controls 1.4

vs

Import Statement:	import QtQuick.Controls 2.4

Cheers!

[Mitya]

@Diracsbracket said in ScrollView doesn't scrolling:

implicitHeight: childrenRect.height
implicitWidth: childrenRect.width

Thanks a lot. That worked.