Issues With Customizing ScrollBar

[mzimmers]

Hi all -

I'm trying to customize a ScrollBar per the instructions here. Here's my code:

ScrollBar.vertical: ScrollBar {
    id: scroller
    policy: ScrollBar.AsNeeded
    contentItem: Rectangle {
        implicitWidth: 6
        radius: width / 2
    }
    background: Rectangle {
        implicitWidth: 6
        radius: width / 2
        color: 'transparent'
    }
}

And here's what I'm getting:

(There are 5 activity bars in the list.)

Notice how the slider portion of the scroll bar is positioned in the middle of the ScrollBar, and doesn't reflect what portion of the list is actually being displayed. It also doesn't move.

I've looked through the properties of ScrollBar, and can't see anything I need to add for this. Any ideas what I'm missing here?

EDIT:

I'm also sometimes getting this error message when I open the Drawer that contains this ListView:

qrc:/qt-project.org/imports/QtQuick/Controls/Windows/ScrollBar.qml:33:49: Unable to assign [undefined] to int

No idea why it only happens sometimes, or what it's referring to.

Thanks...

[JoeCFD]

can you try to remove implicitHeight of contentItem? I did not set it and scrolling works fine. implicitWidth is not scaled with screen size. It is up to you.

        contentItem: Rectangle {
            implicitWidth: 6
            radius: width / 2
        }

[mzimmers]

Progress report:

I've eliminated the visual background by changing its color to the main screen background, and I've given the scroller a minimum size of 0.2, which seems to give the appropriate height to the bar.

ListView {
    id: activityView
    Layout.fillHeight: true
    Layout.fillWidth: true

    model: activityModel
    delegate: activityDelegate

    ScrollBar.vertical: ScrollBar {
        id: scroller
        policy: ScrollBar.AsNeeded
        minimumSize: 0.1
        contentItem: Rectangle {
            implicitHeight: activityView.height // doesn't change anything.
            implicitWidth: 6
            radius: width / 2
        }
        background: Rectangle {
            implicitWidth: 6
            color: Colors.background
        }
    }
}

The result is very close to what's desired; the only current issue is, the bar's top and bottom position aren't quite the same as the scrollable offset.

The difference appears to be the size of the arrows that appear with the default scrollbar. If this is true, can I do something about it? I've tried various height settings, but nothing I've tried fixes this.

Thanks...

[mzimmers]

I decided to submit a bug report for this.

[JoeCFD]

can you try to remove implicitHeight of contentItem? I did not set it and scrolling works fine. implicitWidth is not scaled with screen size. It is up to you.

        contentItem: Rectangle {
            implicitWidth: 6
            radius: width / 2
        }

[mzimmers]

@JoeCFD I tried that already with no change in behavior. FWIW, I also discovered that this problem doesn't exist when deployed to Android.

[JoeCFD]

I do not remember this problem shows up on Linux. No idea about it on Windows. But I will know it soon.

[mzimmers]

Update: @JoeCFD 's suggestion seems to work after all. Here's the working code:

ListView {
    id: activityView
    Layout.fillHeight: true
    Layout.fillWidth: true
    spacing: 10
    clip: true
    boundsBehavior: Flickable.StopAtBounds

    ScrollBar.vertical: Scrollbar_custom {
        id: scroller
        property real barWidth: 6.0
        policy: ScrollBar.AsNeeded
        minimumSize: 0.1
        contentItem: Rectangle {
            implicitWidth: barWidth
            radius: width / 2.0
        }
        background: Rectangle {
            implicitWidth: barWidth
            color: 'transparent'
        }
    }
}

[royb]

Hello mzimmers.
I have the same problem as you described. I tried to use your solution but you use 'Scrollbar_custom' which is not exist here. can you please share 'Scrollbar_custom' too?
Thanks

[mzimmers]

@royb it turns out that we ended up eliminating all scroll bars from our app, so I don't have any active code for this. Here are a couple of snippets from the repository, but I can't vouch for their veracity.

    Flickable {
        id: viewArea
        Layout.fillHeight: true
        Layout.fillWidth: true
        contentHeight: detailList.height
        boundsBehavior: Flickable.StopAtBounds
        boundsMovement: Flickable.StopAtBounds
        clip: true

        RoundList {
            id: detailList
            width: viewArea.width - (scroller.width * 2)
            model: spaceDetailsModel
        }

        ScrollBar.vertical: ScrollbarCustom {
            id: scroller
            height: viewArea.height
            anchors.right: parent.right
        }
    }

ScrollbarCustom.qml

import QtQuick
import QtQuick.Controls

import Nga.Theme

ScrollBar {
    property real barWidth: 6.0
    policy: ScrollBar.AsNeeded
    minimumSize: 0.1
    contentItem: Rectangle {
        implicitWidth: barWidth
        radius: width / 2.0
    }
    background: Rectangle {
        implicitWidth: barWidth
        color: 'transparent'//Colors.background
    }
}

[royb]

Thank you very much. I will try it