How to dynamically set a Flickable's content
-
I'm trying to create a custom Qml control that essentially is a pane with a scrollbar off to the side. I know that
ScrollView
exists but it isn't working for my purposes. So here is my code in the fileScroller.qml
Item { id: root clip: true /** This is the object that will be clipped by the container */ property Item contentItem // The actual area where the actual form is Flickable { id: scrollView clip: true anchors.left: parent.left anchors.right: scrollBar.left anchors.top: parent.top anchors.bottom: parent.bottom contentWidth: width contentHeight: contentItem.height children: [contentItem] } // Container for the scrollbar Rectangle { id: scrollBar anchors.leftMargin: 5 anchors.rightMargin: 5 anchors.top: parent.top anchors.bottom: parent.bottom anchors.right: parent.right // Only show the scrollbar where there isn't enough visible: (scrollView.contentHeight > root.height) y: 0 width: 15 height: parent.height color: "grey" Rectangle { id: scrollbar y: (scrollView.visibleArea.yPosition * root.height) width: parent.width height: (scrollView.visibleArea.heightRatio * root.height) color: "black" } } }
This way in any other Qml file I can do this (hopefully):
Scroller { contentItem: Text { text: "Super-duper-long........... .... } }
Now, The text is appearing in my control, along with a scrollbar to the right. While I can scroll up and down with the
Flickable
, and see the scrollbar move, it's not moving thecontentItem
. But say if I take out the line:children: [contentItem]
And copy and paste my
Text
directly at that line, it will then pan the content up and down. What's going on here? How can I get this to work how I want it it? -
@Ben-S said in How to dynamically set a Flickable's content:
/** This is the object that will be clipped by the container */
property Item contentItemTry this:
/** This is the object that will be clipped by the container */ default property alias contentItem: scrollView.contentItem
(
default
is not necessary, but can be useful).