Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

QML ScrollBar combined with ListView



  • 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:

    enter image description here




  • 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.



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



  • @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
    

Log in to reply