How to dynamically set a Flickable's content

Ben S

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 file Scroller.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 the contentItem. 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?

sierdzio

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

Try 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).