QML中相互依赖属性的双向绑定

Question

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

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

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

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

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

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

编辑：我现在尝试将滑块的值有条件地绑定到百分比值。

对象handle是滑块上的标记，handleArea是附加到它的鼠标区域，允许拖动。

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

我会创建一个属性来存储相互价值。当用户输入文本或移动滑块时，他们将使用一个函数来更新相互值。他们也会倾听价值的变化，并据此调整自己的价值。

这是工作示例

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) + "%"
    }
}