QMLで相互に依存するプロパティの双方向バインディング

Question

QMLを学びながら、私は問題を見つけたが、私は相互に依存するプロパティを持っている。

など。ユーザはスライダで値を設定したり、テキスト入力で値を入力することができます。
スライダを動かしながら、テキスト入力のテキストを更新する必要がありますが、テキスト入力に値を入力するときは、スライダの位置を調整する必要があります。

ここでは、スライダのx値とtextinputのテキストという2つのプロパティがあります。私はそれらを同じフォーマット（例えば、パーセント）に変換し、その逆も同様に更新する必要があります。 2つのバインディングを設定すると、バインディングループが発生しますが、これはおそらく良いことではありません。

私はこれが非常に一般的な問題だと思うので、解決するためのいくつかの "ゴールドスタンダード"があると確信しています。しかし、私は適切な解決策を見つけることができません。

唯一のやり方は、バインディングを使用するのではなく、シグナルを処理することです。値が手動で変更されている（C++でセッターを上書きできない場合）。
これですべては可能ですか？

おはよう！
-m-

EDIT： スライダの値をパーセント値に条件付きでバインドして試しました。

オブジェクト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

私は相互の値を格納する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) + "%" 
    } 
} 

を働いています