綁定兩個屬性值

我已經定義了一個滑塊和一個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) }) 
    } 
} 
}

來源

2015-10-15 Behzad

嗯，我認爲不是TextInput元素，你真的應該使用SpinBox這實際上是用於數字並支持鍵盤輸入作爲w埃爾。

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

它按預期工作，使用每個元素更改值會更改所有元素的值。

來源

2015-10-15 13:32:49 dtech

綁定兩個屬性值

回答

相關問題