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. ListView with Vertical & Horizontal scrolling
Forum Updated to NodeBB v4.3 + New Features

ListView with Vertical & Horizontal scrolling

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 2 Posters 2.1k Views 1 Watching
  • 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.
  • G Offline
    G Offline
    Gigagames
    wrote on last edited by
    #1

    Hello,
    i hope im in the right category (?) none of them looks right for this :D
    and sry for my bad english.

    Im trying to do a Vertical & Horinzontal scrolling Listview WITH headers. But i cant figour out how to do so.
    I got a Vertical & Horinzontal scrolling ListView to work:

     ListView {
                id: listViewVertical
                anchors.fill: parent
                model: colorsModel
                // spacing: 20
                cacheBuffer: 200 // in pixels
    
                delegate: Loader {
                    id: someid
                    property var modeAl: model
                    sourceComponent: testComponent
                }
    }
    
    Component {
            id: testComponent
            ListView {
                id: listViewSomething
                width: 200 //todo change to parent listview width
                height: 30
                orientation: ListView.Horizontal
                model: modeAl
                delegate: Loader {
                    property ListView gridViewSomething: listViewSomething
                    property int indexOfThisDeleagte: index
                    property int itemWidth: 1000
    
                    sourceComponent: listViewItemNormalComponent
    
                    onLoaded: {
                        listViewSomething.height = height
                    }
                }
            }
        }
    
    

    Thats working, but all Horinzontal scrolling listviews are scrolling individually. But i want them to scroll all together and allign with a Header.
    So my questions:

    1. How do i get them to scroll all together? (not individually)
    2. How can i add a Header to this "Listsviews" ? if i put it on the Horinzontal scrolling, it is placed left from the items and in every Row. if i put it, in the vertical scrolling listview i cant scroll it Horizontal (= with the othr Listviews)
    1 Reply Last reply
    0
    • G Offline
      G Offline
      Gigagames
      wrote on last edited by
      #2

      To first question.
      i now tried this:

      property int listViewScrollContentX: 0
      

      then in listViewSomething

      contentX: listViewScrollContentX
      onMovingChanged: {
                      listViewScrollContentX= contentX
                  }
      

      That is "somehow" working, but not smooth the other items just get updatet, to the new position, and not moving. What makes sense becouse contentX first get updatet when you stop pressing

      1 Reply Last reply
      0
      • G Offline
        G Offline
        Gigagames
        wrote on last edited by
        #3

        Ok idear was right but the implementation not :D
        So for question One (to get them scrolled all together)
        i just added this to the Horizontal listview:

        property int listViewScrollContentX: 10
        ListView{
        //... 
                    contentX: listViewScrollContentX
                    onMovingChanged: {
                                listViewScrollContentX= Qt.binding(function () {
                                                    return listViewScrollContentX
                                                    })
                    }
        }
        
        

        So 0nly question 2 is open: how do i add a Header to this Listviews :? That scrolls with the other Horinzontal listviews & is allways on top

        KillerSmathK 1 Reply Last reply
        0
        • G Gigagames

          Ok idear was right but the implementation not :D
          So for question One (to get them scrolled all together)
          i just added this to the Horizontal listview:

          property int listViewScrollContentX: 10
          ListView{
          //... 
                      contentX: listViewScrollContentX
                      onMovingChanged: {
                                  listViewScrollContentX= Qt.binding(function () {
                                                      return listViewScrollContentX
                                                      })
                      }
          }
          
          

          So 0nly question 2 is open: how do i add a Header to this Listviews :? That scrolls with the other Horinzontal listviews & is allways on top

          KillerSmathK Offline
          KillerSmathK Offline
          KillerSmath
          wrote on last edited by
          #4

          how do i add a Header to this Listviews ?

          You could insert the header using the header property of ListView
          http://doc.qt.io/qt-5/qml-qtquick-listview.html#header-prop

          header: Rectangle{
             height: 50
             height: listview.width
             color: "steelblue"
             Text {
                anchors.centerIn: parent
                text: "My Header" 
             }
          }
          

          @Computer Science Student - Brazil
          Web Developer and Researcher
          “Sometimes it’s the people no one imagines anything of who do the things that no one can imagine.” - Alan Turing

          1 Reply Last reply
          0
          • G Offline
            G Offline
            Gigagames
            wrote on last edited by
            #5

            @KillerSmath did you read my question :?
            In the first post "How can i add a Header to this "Listsviews" ? if i put it on the Horinzontal scrolling, it is placed left from the items and in every Row. if i put it, in the vertical scrolling listview i cant scroll it Horizontal (= with the othr Listviews)"

            I know that i can put it in the Header item, but if i put it ther its not working how i want it to work (=Always on Top & Scrolling with the other Horizontal listviews

            1 Reply Last reply
            0

            • Login

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