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

Can not interact with tumblers inside interactive flickable on touch

    XMLWordPrintable

Details

    • Android, iOS/tvOS/watchOS, Linux/X11
    • 2cb75d312 (dev), 23591bef3 (6.6), 6db4bcb49 (6.5), 185888c6a (6.5.2), 3d7a02a02 (tqtc/lts-6.2), 9573506fe (dev), 2a0dab85d (6.5), f86da2d35 (6.6), eb57fe58d (tqtc/lts-6.2)

    Description

      When a non-wrapping tumbler is contained in a flickable which has interactive set to true, it's value can not be changed using a touch screen.
      Using a mouse works as expected for the non-wrapping tumbler contained in a list view.

      It works for wrapping tumblers to some extent, however the change of values gets canceled as soon as the cursor (both mouse and touchscreen) moves outside the controls boundaries.

      The other workaround would be to set interactive: false in the flickable, but that pretty much defeats the purpose of the flickable completely. ScrollView is exhibiting the same behavior.

      This is stopping us from releasing our application.

      main.qml
      import QtQuick
      import QtQuick.Controls
      import QtQuick.Layouts
      
      Window {
          id: window
          width: 640
          height: 480
          visible: true
          title: qsTr("Tumblers inside flickable")
      
          Button {
              id: contentButton
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.top: parent.top
              anchors.margins: 10
              height: 40
      
              text: checked ? "Flickable is interactive" : "Flickable is not interactive"
              checkable: true
              checked: false
          }
      
          Flickable {
              anchors.left: parent.left
              anchors.right: parent.right
              anchors.top: contentButton.bottom
              anchors.bottom: parent.bottom
      
              interactive: contentHeight > height
              contentHeight: container.height
      
              clip: true
      
              ScrollBar.vertical: ScrollBar { }
      
              Item {
                  id: container
                  anchors.top: parent.top
                  anchors.left: parent.left
                  anchors.right: parent.right
                  height: col.height + col.spacing
      
                  Column {
                      id: col
                      anchors.top: parent.top
                      anchors.left: parent.left
                      anchors.right: parent.right
                      anchors.margins: 10
      
                      spacing: 10
      
                      RowLayout {
                          id: row
                          width: col.width
                          height: 200
      
                          Rectangle {
                              Layout.preferredWidth: 100
                              Layout.fillWidth: true
                              Layout.fillHeight: true
                              color: "#404040"
      
                              ColumnLayout {
                                  anchors.fill: parent
                                  Label {
                                      Layout.fillWidth: true
                                      text: "Tumblr no wrap"
                                      horizontalAlignment: Text.AlignHCenter
                                  }
                                  Tumbler {
                                      id: noWrapTumbler
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                                      model: 20
                                      wrap: false
                                  }
                              }
                          }
      
                          Rectangle {
                              Layout.preferredWidth: 100
                              Layout.fillWidth: true
                              Layout.fillHeight: true
                              color: "#404040"
      
                              ColumnLayout {
                                  anchors.fill: parent
                                  Label {
                                      Layout.fillWidth: true
                                      text: "Tumbler wrapping"
                                      horizontalAlignment: Text.AlignHCenter
                                  }
                                  Tumbler {
                                      id: wrapTumbler
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                                      model: 20
                                      wrap: true
                                  }
                              }
                          }
                          Rectangle {
                              Layout.preferredWidth: 100
                              Layout.fillWidth: true
                              Layout.fillHeight: true
                              color: "#404040"
      
                              ColumnLayout {
                                  anchors.fill: parent
                                  Label {
                                      Layout.fillWidth: true
                                      text: "List View"
                                      horizontalAlignment: Text.AlignHCenter
                                  }
                                  ListView {
                                      id: view
                                      Layout.fillWidth: true
                                      Layout.fillHeight: true
                                      model: 20
                                      delegate: Label { width: view.width; text: model.index}
      
                                  }
                              }
                          }
                      }
      
                      Rectangle {
                          width: parent.width
                          height: window.height
                          color: "red"
                          visible: contentButton.checked
                      }
      
                  }
              }
          }
      }
      

      Attachments

        1. tumbler-flickable.zip
          6 kB
          Denis Hessberger
        No reviews matched the request. Check your Options in the drop-down menu of this sections header.

        Activity

          People

            santhoshkumar Santhosh Kumar Selvaraj
            denishessberger Denis Hessberger
            Votes:
            2 Vote for this issue
            Watchers:
            8 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: