Nested Repeater in ListView with ScrollView



  • Hi folks,

    I really like the new labs controls in Qt 5.6, but it looks like I haven't understood Positioners and/or Repeaters. I have nested a Repeater filling a row into a ListView. That works as expected, however, when I insert it into a ScrollView (or attach ScrollBars with the lab views), only the vertical scrolling works as expected. When I print the width of the row, it always seems way too narrow to contain everything.

    Any help will be greatly appreciated

    Uwe

    import QtQuick 2.2
    import QtQuick.Controls 1.4
    
    Rectangle {
        width: 200; height: 200
    
        Component {
            id: elementDelegate
            Text { text: index }
        }
    
        Component {
            id: rowDelegate
    
            Row {
                spacing: 10
                Text { text: "Before" }
    
                Repeater {
                    model:15
                    delegate: elementDelegate
                }
                Text { text: "After" }
            }
        }
    
        Column {
            width: parent.width
            Text { text: "Above" }
    
            ScrollView {
                width: parent.width
                height: 60
                horizontalScrollBarPolicy: Qt.ScrollBarAlwaysOn
                ListView {
                    //anchors.fill: parent
                    clip: true
                    model: 10
                    delegate: rowDelegate
                }
            }
    
            Text { text: "Below" }
        }
    }
    
    


  • According to your code pasted you are not using Qt labs controls



  • Hi, it is true that the code I posted is not using the Qt Labs controls. Since those are not officially released, I tried to reproduce the behaviour with QtQuick2 and found the same problem.



  • Thanks to the discussion here is-there-anyway-to-create-a-scrollable-version-of-layouts, I managed to fix the code for QtQuick 2 and QtQuick Controls 1. I assumed that the changes in the row width are signalled to the ListView and the ScrollView. However, I had to adjust the width after changes explicitly. This version can also handle dynamically rowing and shrinking rows:

    import QtQuick 2.2
    import QtQuick.Controls 1.4
    
    Rectangle {
        width: 200; height: 200
    
        Component {
            id: elementDelegate
            Text { text: index }
        }
    
        Component {
            id: rowDelegate
    
            Row {
                spacing: 10
                onWidthChanged: {
                    var maxWidth = 0;
                    for (var i = 0; i < listView.contentItem.children.length; i++) {
                        if( maxWidth < listView.contentItem.children[i].width ) {
                            maxWidth = listView.contentItem.children[i].width
                        }
                    }
                    listView.contentWidth = maxWidth
                }
    
                Text { text: "Before" }
    
                Repeater {
                    model:15
                    delegate: elementDelegate
                }
                Text { text: "After" }
            }
        }
    
        Column {
            width: parent.width
            Text { text: "Above" }
    
            ScrollView {
                id: scrollView
                width: parent.width
                height: 60
                ListView {
                    id: listView
                    clip: true
                    model: 10
                    delegate: rowDelegate
                }
            }
    
            Text { text: "Below" }
        }
    }
    
    


  • This does not work with Qt Labs Controls. Just changed to ScrollBar and the horizontal one is not working.

    import QtQuick 2.2
    import Qt.labs.controls 1.0
    
    Rectangle {
        width: 200; height: 200
    
        Component {
            id: elementDelegate
            Text { text: index }
        }
    
        Component {
            id: rowDelegate
    
            Row {
                spacing: 10
                onWidthChanged: {
                    var maxWidth = 0;
                    for (var i = 0; i < listView.contentItem.children.length; i++) {
                        if( maxWidth < listView.contentItem.children[i].width ) {
                            maxWidth = listView.contentItem.children[i].width
                        }
                    }
                    listView.contentWidth = maxWidth
                }
    
                Text { text: "Before" }
    
                Repeater {
                    model:15
                    delegate: elementDelegate
                }
                Text { text: "After" }
            }
        }
    
        Column {
            width: parent.width
            Text { text: "Above" }
    
            ListView {
                id: listView
                width: parent.width
                height: 60
                clip: true
                model: 10
                delegate: rowDelegate
                ScrollBar.vertical: ScrollBar { }
                ScrollBar.horizontal: ScrollBar { }
            }
    
            Text { text: "Below" }
        }
    }
    

Log in to reply
 

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