如何阻止 QML 项目被淘汰或其父边界

Question

我有以下代码允许在应用程序上平移图像 window

代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: app
    visible: true
    title: qsTr("Test panning an Image")

    width: 700
    height: 700

    Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis
        }
    }
}

Objective:
我想阻止图像在其父项之外获取 dragged/panned。

基本上我不想让 my_image_item被移到一个位置:

my_image_item 的右边缘位于其父元素的左边缘的左侧，
my_image_item 的左边缘位于其父级右边缘的右侧
my_image_item 的顶边位于其父级底边的下方
my_image_item 的底边位于其父级的顶边上方

主要问题：
当用户拖动 my_image_item 时，如何将 my_image_item 的移动限制在其父项的边缘内？

第二个问题：（如果回答很好）：
限制my_image_item移动的物品必须是它的父项吗？或者它可能是另一个不是其父项的项目？（至少一个共享一个共同的 QML 父级）

Answer 1

我从 Qt docs 本身得到了问题的答案。

将以下内容额外添加到 MouseArea 的拖动属性限制其在其父级边界内的移动。

解法：

drag.minimumX: 0
drag.maximumX: app.width - my_image_item.width
drag.minimumY: 0
drag.maximumY: app.height - my_image_item.height

在问题中列出的 4 个要点中准确地给出了我想要模拟的行为。

以下是最终测试应用的样子：

完整代码：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Controls 2.2

ApplicationWindow {
    id: app
    visible: true
    title: qsTr("Test panning an Image")

    width: 700
    height: 700

    Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis

            drag.minimumX: 0
            drag.maximumX: app.width - my_image_item.width
            drag.minimumY: 0
            drag.maximumY: app.height - my_image_item.height
        }
    }
}

我仍在寻找我的附加次要问题的答案

Answer 2

你试过拖拽吗maximumX/drag.minimumX

http://doc.qt.io/qt-5/qml-qtquick-mousearea.html#drag.minimumX-prop

Image {
        id: my_image_item
        source: "http://doc.qt.io/qt-5/images/declarative-qtlogo.png"
        MouseArea{
            anchors.fill: parent
            drag.target: my_image_item
            drag.axis: Drag.XAndYAxis
            drag.minimumX: my_image_item.x
            drag.maximumX: my_image_item.right // my_image_item.x + width ???
            drag.minimumY: my_image_item.y
            drag.maximumY: my_image_item.bottom // my_image_item.y + height ???
        }
    }

如何阻止 QML 项目被淘汰或其父边界

How to block a QML item from getting panned out or its parent's boundaries

qt

qml

qtquick2