Nested Repeater in ListView with ScrollView

Uwe Koehler

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

vladstelmahovsky

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

Uwe Koehler

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.

Uwe Koehler

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

Uwe Koehler

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