qt - QML 中相互依赖的属性的双向绑定(bind)

Question

在学习 QML 时，我偶然发现了一个问题，即我必须具有相互依赖的属性。

例如用户可以使用 slider 设置一个值，或使用文本输入输入它。
移动 slider 时，应更新文本输入中的文本，而在文本输入中输入值时，需要调整 slider 位置。

现在我有两个属性: slider 的 x 值和文本输入中的文本。我需要将它们转换为相同的格式(例如:百分比)，并更新它们，反之亦然。 设置两个绑定(bind)会导致绑定(bind)循环，这可能不是一件好事。

我认为，这是一个非常常见的问题，所以我确信有一些“黄金标准”可以解决它。但是我找不到合适的解决方案。

我想到的唯一方法是根本不使用绑定(bind)，而是处理信号，其中一个值已手动更改(如果我无法覆盖 C++ 中的 setter)。
这就是你能做的一切吗？

祝你有美好的一天!
-m-

编辑: 我现在尝试有条件地将 slider 的值绑定(bind)到百分比值。

对象handle是 slider 上的标记，handleArea是附加到它的MouseArea，允许拖动。

Binding {
    target: root
    property: 'percent'
    value: handle.x / handleBar.width
    when: handleArea.drag.active
}

Binding {
    target: handle
    property: 'x'
    value: root.percent * handleBar.width
    when: !handleArea.drag.active
}

它有效。但这是一种好的风格吗？

Answer 1

我会制作一个可以存储共同值(value)的属性(property)。当用户输入文本或移动 slider 时，他们将使用一个函数来更新相互值。他们也会倾听值(value)的变化并据此调整自己的值(value)。

这是工作示例

import QtQuick 2.5
import QtQuick.Window 2.2
import QtQuick.Controls 1.4

Window {
    id: window
    visible: true
    width: 400
    height: 80
    title: "Mutual value test"

    property double mutualValue: 0
    function setMutualValue(value)
    {
        if (typeof(value) === "string")
        {
            value = value.replace(",", ".");
            value = parseFloat(value)
        }
        mutualValue = value
    }

    TextInput {
        width: 200
        height: 40
        validator: DoubleValidator {}
        onEditingFinished:
        {
            focus = false
            setMutualValue(text)
        }
        onFocusChanged:
        {
            if (text === inputHelp && focus)
                text = ""
        }
        property alias mutualValue: window.mutualValue
        onMutualValueChanged: setValue(mutualValue)
        property string inputHelp
        color: (text === inputHelp && !focus ? "grey" : "black")
        function setValue(mutualValue)
        {
            inputHelp = mutualValue.toFixed(3)
            text = inputHelp
        }
    }

    Slider {
        x: 200
        width: 200
        height: 40
        onValueChanged: setMutualValue(value)
        property alias mutualValue: window.mutualValue
        onMutualValueChanged: setValue(mutualValue)
        function setValue(mutualValue)
        {
            value = mutualValue
        }
    }

    Text {
        x: (parent.width - width) / 2
        y: 40 + (40 - height) / 2
        text: "Current value is: " + (window.mutualValue * 100).toFixed(2) + "%"
    }
}