Uploaded image for project: 'Qt'
  1. Qt
  2. QTBUG-52553

No horizontal scrolling in ListView with long lines using Qt Quick 2.0

    XMLWordPrintable

Details

    • 8eada7ae7d41a2d93142ea1a6454ab2bbb0998ed

    Description

      Hi there!

      First let me stress that I really like the QtQuick Controls 2! The only problem I have found is this: when I have a ListView with long and many lines and attach ScrollBars to it, only the vertical one is working.

      What I tried:

      1. Flickable with large image and ScrollBars: works great
      2. Using QtQuickControls 1 and ScrollView: works great
      3. Using ScrollBar: doesn't allow to scroll horizontally
      The contentWidth is set correctly as far as I can see.

      Working version:

      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 " + index}
      
                  Text {
                      text: "11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
                  }
      
                  Text { text: "After" }
              }
          }
      
          Column {
              width: parent.width
              Text { text: "Above" }
      
              ScrollView {
                  id: scrollView
                  width: parent.width
                  height: 60
                  ListView {
                      id: listView
                      onContentWidthChanged: {
                          print( "contentWidthChanged: " + contentWidth + "x" + contentHeight )
                      }
                      onContentHeightChanged: {
                          print( "contentHeightChanged: " + contentWidth + "x" + contentHeight )
                      }
      
                      width: parent.width
                      height: 60
                      clip: true
                      model: 20
                      delegate: rowDelegate
                  }
              }
              Text { text: "Below" }
          }
      }
      

      Not working version:

      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 " + index}
      
                  Text {
                      text: "11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"
                  }
      
                  Text { text: "After" }
              }
          }
      
          Column {
              width: parent.width
              Text { text: "Above" }
      
              ListView {
                  id: listView
                  onContentWidthChanged: {
                      print( "contentWidthChanged: " + contentWidth + "x" + contentHeight )
                  }
                  onContentHeightChanged: {
                      print( "contentHeightChanged: " + contentWidth + "x" + contentHeight )
                  }
      
                  width: parent.width
                  height: 60
                  clip: true
                  model: 20
                  delegate: rowDelegate
                  ScrollBar.vertical: ScrollBar { }
                  ScrollBar.horizontal: ScrollBar { }
              }
      
              Text { text: "Below" }
          }
      }
      

      Attachments

        Issue Links

          No reviews matched the request. Check your Options in the drop-down menu of this sections header.

          Activity

            People

              Unassigned Unassigned
              uwe_koehler Uwe Köhler
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Gerrit Reviews

                  There are no open Gerrit changes