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. Nested Repeater in ListView with ScrollView
Forum Updated to NodeBB v4.3 + New Features

Nested Repeater in ListView with ScrollView

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
5 Posts 2 Posters 5.1k 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.
  • U Offline
    U Offline
    Uwe Koehler
    wrote on last edited by
    #1

    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" }
        }
    }
    
    
    1 Reply Last reply
    0
    • V Offline
      V Offline
      vladstelmahovsky
      wrote on last edited by
      #2

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

      1 Reply Last reply
      0
      • U Offline
        U Offline
        Uwe Koehler
        wrote on last edited by
        #3

        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.

        1 Reply Last reply
        0
        • U Offline
          U Offline
          Uwe Koehler
          wrote on last edited by Uwe Koehler
          #4

          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" }
              }
          }
          
          
          1 Reply Last reply
          0
          • U Offline
            U Offline
            Uwe Koehler
            wrote on last edited by
            #5

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