How can I reset the height of scrollbar in listview in QML

Question

I have create a listview with a custom scroll bar. In listview the image of scroll will be resized by the list container. The height of the scrollbar will be changed depend on the size of list data. In my case I want to show the original image which the height of the srollbar haven't be changed. Then print out the height data. Here is my code,

ScrollBar　{
    id: bar       
    implicitHeight: 780 //the size of the original image
    implicitWidth: 33
    contentItem: Image {
        id: sb
        source:"1.png"
    }       
}
Keys.onPressed: { console.log(bar.implicitWidth)}

I use the implicitHeight to reset the height. It can change the height. However, when I set it to 780(the height of the original image), the result show that the height is 560(the height depend on list data). I need to set implicitHeight to the value bigger than 780(like 1000, I don't know how to calculate the accurate value). Then the result of height will be showed to 780.Why?

Then I tried this code,

ScrollBar　{
    id: ba     
    Component.onCompleted: console.log(bar.size)
    contentItem:
        Rectangle {
        implicitWidth: 780
        implicitHeight: 33
        Image {
        id: scrollBar
        source:"1.png"
        }
    }
}

This time, the result show the height of 780! However, I cannot use id to access the implicitHeight, I don't know how to print out the height.

So,my questions are

1. What's the different between two cases? Why the height is not accurate in first case?
2. If I use second method, how can I access(change) the height data by keyboard?

Answer 1

In the ScrollBar the contentItem is automatically resized relatively to the range it needs to manage on its length. If it is a horizontal scroll bar, it will take the implicitHeight to be the height of the contentItem, and change the width, and for vertical scroll bars, the other way around.

In your example, that is the same. The height of your contentItem will change in both cases.
But since your Image is not sized depending on its parent, in the second case, it wont care for any resizing of that parent, and stay at its implicit width and height.

Maybe this example helps you understanding the relations:

Button {
    id: b2
    width: parent.width / 2 - 5
    height: 50
    onClicked: lv.model++
    text: 'add data'
}

Button {
    id: b1
    width: parent.width / 2 -5
    x: parent.width / 2 + 5
    height: 50
    onClicked: value += 30
    property int value: 30
    text: 'change width of the red bobbl.'
}

ListView {
    id: lv
    model: 5
    anchors.fill: parent
    anchors.topMargin: 50
    spacing: 5
    delegate: Rectangle {
        width: parent.width
        height: 40
        border.color: 'red'
    }
    ScrollBar.vertical: ScrollBar {
        id: bar
        policy: ScrollBar.AlwaysOn
        contentItem: Rectangle {
            id: thisWillBeAutomaticallyResizedNoMatterWhatYouDo
            implicitWidth: 6
            radius: width / 2
            color: 'blue'
            onHeightChanged: console.log("Height changed:", height, thisCouldBeYourImage.width, thisCouldBeYourImage.height)

            Rectangle {
                id: thisWillChangeTheSizeWithTheIndicator
                color: 'yellow'
                opacity: 0.7
                width: height
                height: parent.height
                radius: height / 2
                anchors.centerIn: parent
            }

            Rectangle {
                id: thisCouldBeYourImage
                width: b1.value % 200
                height: width
                radius: width / 2
                anchors.centerIn: parent
                color: 'red'
            }
        }
    }
}