Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. ScrollView doesn't scrolling
Forum Updated to NodeBB v4.3 + New Features

ScrollView doesn't scrolling

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
3 Posts 2 Posters 1.8k Views 1 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • M Offline
    M Offline
    Mitya
    wrote on last edited by Mitya
    #1

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

    }

    DiracsbracketD 1 Reply Last reply
    0
    • M 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
              }
          }
      }
      

      }

      DiracsbracketD Offline
      DiracsbracketD Offline
      Diracsbracket
      wrote on last edited by Diracsbracket
      #2

      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!

      M 1 Reply Last reply
      1
      • DiracsbracketD 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!

        M Offline
        M Offline
        Mitya
        wrote on last edited by
        #3

        @Diracsbracket said in ScrollView doesn't scrolling:

        implicitHeight: childrenRect.height
        implicitWidth: childrenRect.width

        Thanks a lot. That worked.

        1 Reply Last reply
        0

        • Login

        • Login or register to search.
        • First post
          Last post
        0
        • Categories
        • Recent
        • Tags
        • Popular
        • Users
        • Groups
        • Search
        • Get Qt Extensions
        • Unsolved