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: parentScrollBar.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!!!
