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

ScrollView doesn't scrolling



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

    }



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



  • @Diracsbracket said in ScrollView doesn't scrolling:

    implicitHeight: childrenRect.height
    implicitWidth: childrenRect.width

    Thanks a lot. That worked.


Log in to reply