QML ScrollBar combined with ListView

[Vildnex]

I'm new to QML and QT so don't blame me if this question is going to sound stupid for most of you but I've search all over the internet without any luck in founding an answer.

---

What I'm trying to do:

I'm having a ScrollView which has inside of it a ScrollBar and a ListView.

I want that at the moment when I'm scrolling the ListView elements to also move the bar from ScrollBar. In other words, I want to use the ScrollBar as an overall view of your current position, you are not supposed to touch that, its only purpose is for viewing.

---

My Code:

   ScrollView{
        implicitHeight: 100
        implicitWidth: 50
        anchors.fill: parent
        ScrollBar.horizontal: ScrollBar{
            id: hbar
            active: true
            policy: ScrollBar.AlwaysOn
            anchors {
                    left: parent.left
                    top: parent.top
                    right: parent.right
            }

            background: Rectangle {
                implicitWidth: 100
                implicitHeight: 50
                opacity: enabled ? 1 : 0.3
                color: hbar.down ? "#red" : "black"
            }
            contentItem: Rectangle {
                implicitWidth: 6
                implicitHeight: 100
                radius: width / 2
                color: hbar.pressed ? "#81e889" : "#c2f4c6"
            }

        }
        ListView {
            id: listViewParent
            height: listViewID.height/10*6

            contentHeight: height*2
            contentWidth: width*2

            clip: false
            interactive: false
            keyNavigationWraps: true
            anchors.right: parent.right
            anchors.rightMargin: 0
            anchors.left: parent.left
            anchors.leftMargin: 0
            enabled: true
            scale: 1
            transformOrigin: Item.Center
            anchors.verticalCenter: parent.verticalCenter
            boundsBehavior: Flickable.DragAndOvershootBounds
            flickableDirection: Flickable.HorizontalFlick
            highlightMoveDuration: 0
            cacheBuffer: 300
            snapMode: ListView.SnapToItem
            layoutDirection: Qt.LeftToRight
            orientation: ListView.Vertical
            model: 1

            delegate:
                ListView {

                width: parent.width;
                height: parent.height;
                spacing: listViewID.width/8/9
                model: MovieListModel {}
                orientation: ListView.Horizontal
                id: listid
                delegate:
                    Rectangle {
                    property int recDynamicHeight: listViewID.height/10*6
                    property int recOriginalHeight: listViewID.height/10*6
                    property int recDynamiclWidth: listViewID.width/7
                    property int recOriginalWidth: listViewID.width/7
                    id: rectPer
                    width: recDynamiclWidth
                    height: recDynamicHeight

                    Image {
                        id: image1
                        anchors.fill: parent;
                        source: model.imgUrl
                    }
                    Text {
                        property bool isVisible: false
                        color: "#ffffff"
                        anchors.fill: parent
                        visible: textid.isVisible
                        id: textid
                        text: model.title
                        font.bold: true
                        horizontalAlignment: Text.AlignLeft
                        font.pixelSize: listViewID.width/8/9
                        topPadding: listViewID.width/8/9
                        leftPadding: listViewID.width/8/9
                    }
                    Text {
                        anchors.topMargin: listViewID.width/8/9
                        color: "#ffffff"
                        anchors.fill: parent
                        visible: textid.isVisible
                        id: yearId
                        text: model.year
                        horizontalAlignment: Text.AlignLeft
                        font.pixelSize: listViewID.width/8/9
                        topPadding: listViewID.width/8/9*2
                        leftPadding: listViewID.width/8/9
                    }

                    MouseArea {
                        anchors.fill: parent
                        onPressed: {
                            rectPer.recDynamicHeight = rectPer.recOriginalHeight;
                            rectPer.recDynamicHeight += rectPer.recOriginalHeight/10;
                            rectPer.recDynamiclWidth += rectPer.recOriginalWidth/10;
                            console.log(textid.isVisible);
                            textid.isVisible = true;
                            textid.visible = textid.isVisible;
                            console.log(sideButtonID.x);
                            console.log(sideButtonID.y);
                            console.log(model.year + " clicked");
                        }
                        onClicked: {
                            console.log("INDEX: " + model.id)
                            load_page(PageType.movie_detailed_view, model.title, model.description, model.imgUrl, model.type, model.year)
                        }
                        onReleased: {
                            rectPer.recDynamicHeight = rectPer.recOriginalHeight;
                            rectPer.recDynamiclWidth = rectPer.recOriginalWidth;
                            textid.isVisible = false;
                            textid.visible = textid.isVisible;
                        }
                    }
                }
            }
        }
    }

---

Layout:

---

[MattC24]

Just to clarify your problem. Right now, your scrollbar does not move when you are scrolling through your listview? I'm having trouble understanding what your problem/question is.

[Vildnex]

@MattC24 Yes exactly. When I'm scrolling through my list without touching the scrollbar, the scrollbar is not going to move

[MattC24]

@Vildnex From the looks of your code, it's most likely because you're anchoring it into to the parent.left and parent.rightso it's stretching it across the entire background. THat's probably why it doesn't look like its moving. What I would do is get rid of scrollview and just use Scrollbar inside listview(it inherits from flickable)

Here's an example I did for a veritcal listview.

    ListView {
        id: settinglist
        width: parent.width
        anchors.top: title.bottom
        anchors.bottom: parent.bottom
        anchors.horizontalCenter: parent.horizontalCenter
        boundsBehavior: Flickable.StopAtBounds
        ScrollBar.vertical: ScrollBar {
            policy: ScrollBar.AlwaysOn
            active: ScrollBar.AlwaysOn
        }
        model: settingsModel
        .
        .
        .
//rest of your code