QML Scrollview does not work.

[aarelovich]

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.

[fcarney]

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

[aarelovich]

@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

[Shrinidhi Upadhyaya]

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]

[fcarney]

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

[aarelovich]

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