绑定两个属性值

Question

我已经定义了一个滑块和一个TextInput。我想做的是，当用户移动滑块手柄时，TextInput中的值正在更新，相反，当用户输入TextInput中的值时，滑块手柄正在更新。

我在这里所做的是当用户移动滑块处理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

嗯，我认为代替TextInput元素，你真的应该使用SpinBox，它实际上是用于数字和支持键盘输入。

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)
            }
        }
    }

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