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