Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Solved QML Scrollview does not work.

    QML and Qt Quick
    3
    6
    1726
    Loading More Posts
    • 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.
    • aarelovich
      aarelovich last edited by

      I need to create a long form using QML. The form will not fit inside the window, so I need for it to be scrollable. However I can't get the scroll view to work. Here is a minimum working example of my problem:

      import QtQuick.Window 2.2
      import QtQuick 2.9
      import QtQuick.Controls 2.3
      
      Window {
          visible: true
          width: 1280
          height: 720
          title: qsTr("Hello World")
      
          Rectangle{
              anchors.centerIn: parent
              width: parent.width*0.8;
              height: parent.height*0.7;
      
              ScrollView {
                  anchors.fill: parent
                  clip: true
                  contentHeight: parent.height
      
                  Rectangle{
                      id: rect1
                      width: parent.width
                      height: 200
                      color: "#ffff00"
                      anchors.horizontalCenter: parent.horizontalCenter
                  }
      
                  Rectangle{
                      id: rect2
                      width: parent.width
                      height: 500
                      color: "#ff00ff"
                      anchors.top: rect1.bottom
                      anchors.horizontalCenter: parent.horizontalCenter
                  }
      
      
                  Rectangle{
                      id: rect3
                      width: parent.width
                      height: 500
                      color: "#00ffff"
                      anchors.top: rect2.bottom
                      anchors.horizontalCenter: parent.horizontalCenter
                  }
      
              }
      
          }
      
      
      }
      

      As I understand it, this should allow me to scroll in order to see the 3 rectangles. However I only the see the first one and the upper half of the second one and I can't scroll.

      Any help would be greatly appriciated

      In case it matter I have tried it with both Qt 5.10 and 5.12 with different compilers and the effect is the same. It seems to be that I'm using it wrong.

      1 Reply Last reply Reply Quote 0
      • fcarney
        fcarney last edited by

        This is from my junk pile, does this work:

        ScrollView {
                anchors.fill: parent
        
                ScrollBar.vertical: ScrollBar {
                    id: verticalBar
                    anchors.top: parent.top
                    anchors.bottom: parent.bottom
                    anchors.right: parent.right
                    hoverEnabled: true
                    active: hovered || pressed
        
                    property bool showIt: hovered || pressed
        
                    background: Rectangle {
                        implicitWidth: 25
                        implicitHeight: 40
                        radius: 5
                        color: verticalBar.showIt ? "grey" : "transparent"
                    }
        
                    contentItem: Item {
                        implicitWidth: 25
                        implicitHeight: 40
                        Rectangle {
                            anchors.fill: parent
                            anchors.topMargin: 6
                            anchors.leftMargin: 4
                            anchors.rightMargin: 4
                            anchors.bottomMargin: 6
                            radius: 10
                            color: verticalBar.showIt ? "#424246" : "transparent"
                        }
                    }
                }
        
        //        ListView {
        //            width: parent.width
        //            model: 40
        //            delegate: ItemDelegate {
        //                text: "Item " + (index + 1)
        //                width: parent.width
        //            }
        //        }
        
                TextEdit{
                    id: webview
                    //width: parent.width
        
                    //anchors.fill: parent // breaks scrolling
                    //textFormat: Text.RichText
                    textFormat: Text.PlainText
                    //readOnly: true
                    focus: true
                    selectByMouse: true
                    textMargin: 20
                    text: "gggggggg\n\n\n\n\n\n\n\n\n\n\ngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg"
                }
            }
        

        C++ is a perfectly valid school of magic.

        aarelovich 1 Reply Last reply Reply Quote 0
        • aarelovich
          aarelovich @fcarney last edited by

          @fcarney said in QML Scrollview does not work.:

          ScrollView {
          anchors.fill: parent

              ScrollBar.vertical: ScrollBar {
                  id: verticalBar
                  anchors.top: parent.top
                  anchors.bottom: parent.bottom
                  anchors.right: parent.right
                  hoverEnabled: true
                  active: hovered || pressed
          
                  property bool showIt: hovered || pressed
          
                  background: Rectangle {
                      implicitWidth: 25
                      implicitHeight: 40
                      radius: 5
                      color: verticalBar.showIt ? "grey" : "transparent"
                  }
          
                  contentItem: Item {
                      implicitWidth: 25
                      implicitHeight: 40
                      Rectangle {
                          anchors.fill: parent
                          anchors.topMargin: 6
                          anchors.leftMargin: 4
                          anchors.rightMargin: 4
                          anchors.bottomMargin: 6
                          radius: 10
                          color: verticalBar.showIt ? "#424246" : "transparent"
                      }
                  }
              }
          

          // ListView {
          // width: parent.width
          // model: 40
          // delegate: ItemDelegate {
          // text: "Item " + (index + 1)
          // width: parent.width
          // }
          // }

              TextEdit{
                  id: webview
                  //width: parent.width
          
                  //anchors.fill: parent // breaks scrolling
                  //textFormat: Text.RichText
                  textFormat: Text.PlainText
                  //readOnly: true
                  focus: true
                  selectByMouse: true
                  textMargin: 20
                  text: "gggggggg\n\n\n\n\n\n\n\n\n\n\ngggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggggg"
              }
          }
          

          I'm not sure what the code was supposed to do, but no I does not work. I still can't get anything to scroll

          fcarney 1 Reply Last reply Reply Quote 0
          • Shrinidhi Upadhyaya
            Shrinidhi Upadhyaya last edited by

            Hi @aarelovich , just change your contentHeight, you have given the contentHeight as parent.height which is wrong, contentHeight should be the height of your content.
            So now the contentHeight is 1200 that is (rect1.height + rect2.height + rect3.height)

            Sample code:-

            ScrollView {
                      anchors.fill: parent
                      clip: true
                      contentHeight: 1200
                      [..]
                      [..]
            }
            

            Just have a look into the flickable documentation[https://doc.qt.io/qt-5/qml-qtquick-flickable.html]

            Shrinidhi Upadhyaya.
            Upvote the answer(s) that helped you to solve the issue.

            aarelovich 1 Reply Last reply Reply Quote 2
            • fcarney
              fcarney @aarelovich last edited by

              @aarelovich said in QML Scrollview does not work.:

              I'm not sure what the code was supposed to do, but no I does not work. I still can't get anything to scroll

              Sorry, that should have been a textarea not a textedit. Newer versions of textedit wont scroll. This works though:

              import QtQuick 2.12
              import QtQuick.Controls 2.12
              
              ApplicationWindow {
                  visible: true
                  width: 640
                  height: 480
                  title: qsTr("Scroll")
              
                  menuBar: MenuBar {
                      delegate: MenuBarItem {
                          id: menuBarItem
              
                          contentItem: Text {
                              text: menuBarItem.text
                              font: menuBarItem.font
                              opacity: enabled ? 1.0 : 0.3
                              color: menuBarItem.highlighted ? "#ffffff" : "#21be2b"
                              horizontalAlignment: Text.AlignLeft
                              verticalAlignment: Text.AlignVCenter
                              elide: Text.ElideRight
                          }
              
                          background: Rectangle {
                              implicitWidth: 30
                              implicitHeight: 15
                              opacity: enabled ? 1 : 0.3
                              color: menuBarItem.highlighted ? "#21be2b" : "transparent"
                          }
                      }
              
                      background: Rectangle {
                          implicitWidth: 30
                          implicitHeight: 15
                          color: "#f0f0f0"
              
                          Rectangle {
                              color: "#21be2b"
                              width: parent.width
                              height: 1
                              anchors.bottom: parent.bottom
                          }
                      }
              
                      Menu {
                          title: "File"
              
                          MenuItem {
                              text: "Test"
                          }
                      }
                  }
              
                  ScrollView {
                      anchors.fill: parent
              
                      ScrollBar.vertical: ScrollBar {
                          id: verticalBar
                          anchors.top: parent.top
                          anchors.bottom: parent.bottom
                          anchors.right: parent.right
                          hoverEnabled: true
                          active: hovered || pressed
              
                          property bool showIt: hovered || pressed
              
                          background: Rectangle {
                              implicitWidth: 25
                              implicitHeight: 40
                              radius: 5
                              color: verticalBar.showIt ? "grey" : "transparent"
                          }
              
                          contentItem: Item {
                              implicitWidth: 25
                              implicitHeight: 40
                              Rectangle {
                                  anchors.fill: parent
                                  anchors.topMargin: 6
                                  anchors.leftMargin: 4
                                  anchors.rightMargin: 4
                                  anchors.bottomMargin: 6
                                  radius: 10
                                  color: verticalBar.showIt ? "#424246" : "transparent"
                              }
                          }
                      }
              
                      ListView {
                          width: parent.width
                          model: 40
                          delegate: ItemDelegate {
                              text: "Item " + (index + 1)
                              width: parent.width
                          }
                      }
                  }
              }
              

              C++ is a perfectly valid school of magic.

              1 Reply Last reply Reply Quote 0
              • aarelovich
                aarelovich @Shrinidhi Upadhyaya last edited by

                @shrinidhi-upadhyaya Thank you!! Setting the contet height did the trick!!!

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post