Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML ScrollBar combined with ListView

QML ScrollBar combined with ListView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
4 Posts 2 Posters 5.5k Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • V Offline
    V Offline
    Vildnex
    wrote on 8 Apr 2020, 14:12 last edited by
    #1

    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


    1 Reply Last reply
    0
    • M Offline
      M Offline
      MattC24
      wrote on 8 Apr 2020, 17:24 last edited by
      #2

      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.

      V 1 Reply Last reply 8 Apr 2020, 17:51
      0
      • M MattC24
        8 Apr 2020, 17:24

        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.

        V Offline
        V Offline
        Vildnex
        wrote on 8 Apr 2020, 17:51 last edited by Vildnex 4 Aug 2020, 17:53
        #3

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

        1 Reply Last reply
        0
        • M Offline
          M Offline
          MattC24
          wrote on 9 Apr 2020, 15:10 last edited by
          #4

          @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
          
          1 Reply Last reply
          0

          1/4

          8 Apr 2020, 14:12

          • Login

          • Login or register to search.
          1 out of 4
          • First post
            1/4
            Last post
          0
          • Categories
          • Recent
          • Tags
          • Popular
          • Users
          • Groups
          • Search
          • Get Qt Extensions
          • Unsolved