ListView with Vertical & Horizontal scrolling



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


  • 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



  • 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



  • 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" 
       }
    }
    


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


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.