How can i change the location of scrollBar of ListView in Qml

Question

I have created a ListView with a scrollBar. Like this

Here is my code,

ListView {
    id: listView;
    ScrollBar.vertical: ScrollBar {
        id: bar
        //x :100 doesn't work
        active: true

      }
    }

In my case, i want to reset the location of the scrollbar. For example,move the scrollbar to the right by 5 pixels more. I tried to set "x:" , but didn't work. How can i solve my problem.

Answer 1

You can move the ScrollBar outside of the ListView and reference it inside the ListView with its id:

ListView {
    id: listView
    ScrollBar.vertical: bar
}

ScrollBar {
    id: bar
    active: true
    anchors {
        left: listView.left
        top: listView.top
        bottom: listView.bottom
        leftMargin: 100
    }
}

Answer 2

You have to establish that property a moment after loading the ScrollBar since the ListView sets it to the default position.

ScrollBar.vertical: ScrollBar {
    id: sb
    active: true
    Component.onCompleted: x = 100
}