QML Scrollview does not work.



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



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


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



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



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


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


 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.