qml - 绑定(bind)两个属性值

Question

我定义了一个 slider 和一个 TextInput。我想要做的是，当用户移动 slider handle 时，TextInput 中的值正在更新，相反，当用户在 TextInput 中输入值时， slider handle 将更新正在更新。

我在这里所做的是当用户移动 slider 处理 TextInput 中的值，但相反的操作不起作用。

ColorSlider.qml

// Vertical "slider" control used in colorpicker
import QtQuick 2.4

Item {
property alias pPickerCursor: pickerCursor
property real value: (1 - pickerCursor.y/height)

width: 15; height: 300
Item {
    id: pickerCursor
    width: parent.width
    Rectangle {
        x: -3; y: -height*0.5
        width: parent.width + 4; height: 7
        border.color: "black"; border.width: 1
        color: "transparent"
        Rectangle {
            anchors.fill: parent; anchors.margins: 2
            border.color: "white"; border.width: 1
            color: "transparent"
        }
    }
}
MouseArea {
    id: pickerCursorMouseArea
    anchors.fill: parent
    function handleMouse(mouse) {
        if (mouse.buttons & Qt.LeftButton) {
            pickerCursor.y = Math.max(0, Math.min(height, mouse.y))
        }
    }
    onPositionChanged: {
        handleMouse(mouse)
    }

    onPressed: {
        handleMouse(mouse)
    }
}
}

NumberBox.qml

//  Edit box (with caption), editing a number value
 import QtQuick 2.4

Row {
property alias  caption: captionBox.text;
property alias  value: inputBox.text;
property alias  min: numValidator.bottom;
property alias  max: numValidator.top;
property alias  decimals: numValidator.decimals;
property double pMax: 1;

width: 80;
height: 15
spacing: 4
anchors.margins: 2

Text {
    id: captionBox
    width: 18;// height: parent.height
    color: "#AAAAAA"
    font.pixelSize: 11; font.bold: true
    horizontalAlignment: Text.AlignRight; verticalAlignment: Text.AlignBottom
    anchors.bottomMargin: 3
}

TextInput {
        id: inputBox
        anchors.leftMargin: 4; anchors.topMargin: 1; anchors.fill: parent
        color: "#AAAAAA"; selectionColor: "#FF7777AA"
        font.pixelSize: 11            
        maximumLength: 10
        focus: true
        selectByMouse: true
        validator: DoubleValidator {
            id: numValidator
            bottom: 0; top: 1; decimals: 2
            notation: DoubleValidator.StandardNotation;
        }

    }
}

main.qml

Rectangle
{
width: 400;
height: 400;

ColorSlider { id: alphaSlider; anchors.fill: parent;}

NumberBox {
    id: alphaBox
    caption: "A:"; value: Math.ceil(alphaSlider.value*255)
    min: 0; max: 255; pMax: 255;

    onValueChanged:{
    if(parseFloat(value) > pMax)
    {
         value = Qt.binding(function() { return Math.ceil(alphaSlider.value*255) })
     }
 }
 }

Answer 1

嗯，我认为您确实应该使用 SpinBox 而不是 TextInput 元素，它实际上用于数字并且也支持键盘输入。

Item {
        id: main
        property int value : 50

        Row {
            Slider {
                minimumValue: 0
                maximumValue: 100
                value: main.value
                onValueChanged: main.value = value
            }

            SpinBox {
                minimumValue: 0
                maximumValue: 100
                value: main.value
                onValueChanged: main.value = value
            }

            TextInput {
                validator: IntValidator {
                    bottom: 0
                    top: 100
                }
                text: main.value
                onTextChanged: main.value = Number(text)
            }
        }
    }

它按预期工作，使用每个元素更改值会更改所有元素的值。