Loading...

XML

Word

Printable

Details

Type: Bug
Resolution: Fixed
Priority: P2: Important
Fix Version/s: 6.2.9, 6.5.2, 6.5.3, 6.6.0 Beta2, 6.7.0 FF
Affects Version/s: 6.3.2, 6.3, 6.4.0, 6.4.1, 6.4.2, 6.5.0
Component/s: Quick: Controls 2
Labels:
- Reported_by_support_standard
Environment:
Ubuntu 20.04

Platform/s:

Android, iOS/tvOS/watchOS, Linux/X11
Commits:
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
                }

            }
        }
    }
}