Question

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

E.g。用户可以使用滑块设置值，或者使用textinput输入移动滑块时，应更新textinput中的文本，而在textinput中输入值时，需要调整滑块位置。

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

我认为，这是一个非常普遍的问题，所以我确信有一些＆＃34;黄金标准＆＃34;解决它。但是，我无法找到合适的解决方案。

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

祝你好运！
-m -

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

对象handle是滑块上的标记，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

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

这是工作示例

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

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

1 个答案: