QML的PinchArea在与QML Flickable一起使用时无法按预期工作

Question

我正在实现一个简单的图像浏览器，并希望在Flickable内实现捏合缩放。在查看了几个示例后，我找到了这个，并认为我可以做类似的事情。然而，当我测试代码（在Android上使用Qt 5.13）时，它并没有按预期工作。问题在于，当图像被缩放时，PinchArea停止工作，用户无法在Flickable仍允许在该缩放级别下“轻扫”图像的情况下缩小图像。以下是代码，我找不到任何错误：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Layouts 1.0

ApplicationWindow {
    visible: true
    width: 640
    height: 480
    title: qsTr("Flickable Image Zoom Example")

    Page {
        id: imagePage

        property string imgUrl: "qrc:/messi.jpg"
        property string strHpTitle: ""
        property string strThumbnailUrl: ""

        anchors.fill: parent
        Flickable {
            id: imageFlickable
            anchors.fill: parent
            contentWidth: imageContainer.width; contentHeight: imageContainer.height
            clip: true
            onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();

            Item {
                id: imageContainer
                width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
                height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)

                Image {
                    id: imagePreview

                    property real prevScale

                    function fitToScreen() {
                        scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
                        pinchArea.minScale = scale
                        prevScale = scale
                    }

                    anchors.centerIn: parent
                    fillMode: Image.PreserveAspectFit
                    cache: false
                    asynchronous: true
                    source: imagePage.imgUrl
                    sourceSize.height: 1000;
                    smooth: !imageFlickable.moving

                    onStatusChanged: {
                        if (status == Image.Ready) {
                            fitToScreen()
                        }
                    }
                    onScaleChanged: {
                        if ((width * scale) > imageFlickable.width) {
                            var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
                            imageFlickable.contentX = xoff - imageFlickable.width / 2
                        }
                        if ((height * scale) > imageFlickable.height) {
                            var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
                            imageFlickable.contentY = yoff - imageFlickable.height / 2
                        }
                        prevScale = scale
                    }
                }
            }

            PinchArea {
                id: pinchArea

                property real minScale: 1.0
                property real maxScale: 3.0

                anchors.fill: parent
                pinch.target: imagePreview
                pinch.minimumScale: minScale
                pinch.maximumScale: maxScale
                pinch.dragAxis: Pinch.XandYAxis

                onPinchFinished: {
                    imageFlickable.returnToBounds()
                }
            }
        }
    }
}

- reckless

Answer 1

好的，我已经找到了解决这个问题的方法。问题（我认为）是由于一个bug引起的。出于某种奇怪的原因，我的代码中的 Flickable 会从 PinchArea 中窃取触摸事件，使得捏合触摸事件被忽略并传递到 Flickable 上。为了解决这个问题，我发现了一种解决方法，即在 PinchArea 内创建一个 MouseArea，这允许 PinchArea 接收触摸事件，使得 Flickable 不能够窃取它们。因此，采用这种解决方法后，我的代码结构如下：

Flickable{
   PinchArea{
      MouseArea{ anchors.fill: parent} // this is the workaround
   }
   Item{}
}

我已在这里报告了该错误，并上传了一个小视频展示其原因。

- reckless

---

它还从元素中窃取了MouseArea拖动事件！我有一个Flickable，其中一个Rectangle充当画布。它有一个Image和一些可拖动的矩形（具有自己的MouseArea+drag）作为子元素。一旦我将画布矩形（因此图像和其他矩形）缩放到比例> 1，小矩形就会出现问题，99％的时间无法拖动。另一方面，在这些鼠标区域中的单击以及它们的坐标都可以正常注册。如果比例<1，则拖动效果良好。 - Nenad