0

我使用的是Qt 5.9.3商业版。

场景
我有逻辑要在我的代码的 Qt QML 部分中执行。点击一些随机按钮。我想将 QML 矩形移动到另一个位置。另一个位置是(x, y) position根据矩形的当前位置计算的。

以下是我想做的事情：

代码： 

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    visible: true
    width: 800
    height: 600
    title: qsTr("Hello World")

    property bool some_boolean_flag: false

    Rectangle {
        id: my_rect_1
        color: "blue"
        width: parent.width / 4
        height: parent.height / 4
        z:1

        property real current_x
        property real current_y

        x: {
            if (some_boolean_flag) {
                current_x = current_x + current_x/10
                return current_x
            }
            else {
                var default_x = parent.width/6
                current_x = default_x
                return current_x
            }
        }
        y: {

            if (some_boolean_flag) {
                current_y = current_y + current_y/10
                return current_y
            }
            else {
                var default_y = parent.height/6
                current_y = default_y
                return current_y
            }
        }
    }

    Rectangle {
        id: my_rect_2
        color: "yellow"
        width: parent.width/5
        height: parent.height/5
        x: parent.width - parent.width/4
        y: parent.height - parent.height/4
        z:2

        MouseArea {
            anchors.fill: parent
            onClicked: {
                // swapping the boolean flag between true and false
                some_boolean_flag = !some_boolean_flag
            }
        }
    }
}

这个问题的目的：
请注意，我想以声明方式进行计算。我可以轻松地创建一个QML 函数并声明一些全局属性，这当然很容易，但进行此计算并不是问题的重点。我的目标是学习如何以声明方式执行此操作。如何QQuickItem::x根据QQuickItem::x的当前值本身对 a 应用计算..

如果您运行这个问题中的示例代码，您会看到它my_rect_1只是在 2 个位置之间来回交换，这不是逻辑的真正意图。逻辑的目的是保持递增my_rect_1::x，并保持my_rect_1::y一定的因子，my_rect_1当您继续单击另一个矩形时，这将导致向右和向下移动my_rect_2。

另一个问题是，当我单击时，我在运行时
不断收到以下错误my_rect_2。

qrc:/main.qml:12:5: QML Rectangle: Binding loop detected for property "x"

我知道QML是在抱怨属性的循环x依赖my_rect_1。我怎样才能避免这种情况并实现转换的声明方式xand y？

我从搜索中找到的
潜在解决方案

如何在不编写在外部单独进行此转换的 QML 函数的情况下实现此行为 my_rect_1？

4

1 回答 1

1

好吧，“声明式”将仅涉及绑定，它们本质上几乎是功能，并具有在表达式中涉及的值发生变化时自动重新评估的额外好处。

这是一个简单的示例，它将在屏幕上显示一个红点，当单击窗口时，该点将移动到由该点的当前位置和单击位置派生的位置，将其放在假想的中心两个坐标之间的线：

ApplicationWindow {
  id: main
  width: 640
  height: 480
  visible: true

  property real xpos: 10
  property real ypos: 10

  Rectangle {
    id: rect
    x: xpos
    y: ypos
    width: 10
    height: 10
    radius: 5
    color: "red"
  }

  MouseArea {
    anchors.fill: parent
    onClicked: {
      xpos = (xpos + mouseX) * .5
      ypos = (ypos + mouseY) * .5
      console.log(ypos)
    }
  }
}

请注意，xpos 和 ypos 属性实际上是多余的，没有它也可以实现相同的效果，但它会涉及手动操作点坐标，因此不会以纯粹的“声明方式”声明其位置。这样，它就绑定到属性值，并且无论哪个进程控制这些值，都将继续跟踪它们。

至于这部分代码：

  x: {
      if (some_boolean_flag) {
          current_x = current_x + current_x/10
          return current_x
      }
      else {
          var default_x = parent.width/6
          current_x = default_x
          return current_x
      }
  }

它是定义属性值的绑定表达式。如果手动为属性分配值，则会破坏现有绑定。您所做的是为应该自动执行此操作的表达式中的属性分配一个值 - 纯粹是胡说八道，这也解释了为什么它不能按预期工作。

适当的格式是：

  x: {
      if (some_boolean_flag) {
          return current_x + current_x/10
      }
      else {
          var default_x = parent.width/6
          return default_x
      }
  }

这实际上可以归结为：

  x: some_boolean_flag ? current_x + current_x/10 : parent.width/6

等等...正如您所见，使用这种格式会删除绑定循环警告，现在您的行为与代码逻辑意图相匹配。

于 2018-02-24T14:18:51.880 回答