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. QML Scrollview does not work.
Forum Updated to NodeBB v4.3 + New Features

QML Scrollview does not work.

Scheduled Pinned Locked Moved Solved QML and Qt Quick
6 Posts 3 Posters 3.3k Views 2 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.
  • A Offline
    A Offline
    aarelovich
    wrote on 10 Sept 2019, 22:02 last edited by
    #1

    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
    0
    • F Offline
      F Offline
      fcarney
      wrote on 10 Sept 2019, 22:23 last edited by
      #2

      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.

      A 1 Reply Last reply 10 Sept 2019, 23:37
      0
      • F fcarney
        10 Sept 2019, 22:23

        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"
                }
            }
        
        A Offline
        A Offline
        aarelovich
        wrote on 10 Sept 2019, 23:37 last edited by
        #3

        @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

        F 1 Reply Last reply 11 Sept 2019, 14:11
        1
        • Shrinidhi UpadhyayaS Offline
          Shrinidhi UpadhyayaS Offline
          Shrinidhi Upadhyaya
          wrote on 11 Sept 2019, 05:48 last edited by
          #4

          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.

          A 1 Reply Last reply 11 Sept 2019, 19:28
          3
          • A aarelovich
            10 Sept 2019, 23:37

            @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

            F Offline
            F Offline
            fcarney
            wrote on 11 Sept 2019, 14:11 last edited by
            #5

            @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
            0
            • Shrinidhi UpadhyayaS Shrinidhi Upadhyaya
              11 Sept 2019, 05:48

              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]

              A Offline
              A Offline
              aarelovich
              wrote on 11 Sept 2019, 19:28 last edited by
              #6

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

              1 Reply Last reply
              0

              1/6

              10 Sept 2019, 22:02

              • Login

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