オブジェクトのプロパティには静的な値を割り当てることができ、明示的に新しい値を割り当てるまでその値は不変のままです。しかし、QMLとその組み込みの動的オブジェクト挙動のサポートを最大限に活用するためには、ほとんどのQMLオブジェクトでプロパティバインディングが使用されます。

プロパティバインディングは、異なるオブジェクトのプロパティ間の関係を指定できるQMLの中核となる機能です。プロパティの依存対象の値が変更されると、指定された関係に従ってそのプロパティが更新されます。

内部的には、QMLエンジンはプロパティの依存関係（つまり、バインディング式に含まれる変数）を監視しています。変更を検出すると、バインディング式を再評価し、新しい結果をプロパティに適用します。

概要

プロパティバインディングを作成するには、目的の値に評価される JavaScript 式を割り当てます。最も単純な例としては、別のプロパティを参照するバインディングが挙げられます。

バインディングでは、オブジェクトのプロパティへのアクセス、メソッドの呼び出し、および `Math` などの組み込み JavaScript オブジェクトの使用が可能です。

次の例では、青いRectangle の高さが、その親の高さにバインドされています。

Rectangle {
    width: 200; height: 200

    Rectangle {
        width: 100
        height: parent.height
        color: "blue"
    }
}

親の矩形の高さが変更されるたびに、青い矩形の高さも同じ値に更新されます。

以下は、前の例で考えられる他のバインディングの例です：

height: parent.height / 2

height: Math.min(parent.width, parent.height)

height: parent.height > 100 ? parent.height : parent.height/2

height: {
    if (parent.height > 100)
        return parent.height
    else
        return parent.height / 2
}

height: someMethodThatReturnsHeight()

以下は、バインディング式でオブジェクトや型を使用する、より複雑な例です：

Column {
    id: column
    width: 200
    height: 200

    Rectangle {
        id: topRect
        width: Math.max(bottomRect.width, parent.width/2)
        height: (parent.height / 3) + 10
        color: "yellow"

        TextInput {
            id: myTextInput
            text: "Hello QML!"
        }
    }

    Rectangle {
        id: bottomRect
        width: 100
        height: 50
        color: myTextInput.text.length <= 10 ? "red" : "blue"
    }
}

前の例では、

• topRect.width bottomRect.width に依存し、column.width
• topRect.height はcolumn.height
• bottomRect.color はmyTextInput.text.length

さらに、JavaScript関数内のプロパティ参照は、それ自体が自身の値を参照している場合、再評価されます。たとえば、次のスニペットでは、Rectangle のenabled プロパティが変更されるたびに、x およびy プロパティのバインディングが再評価されます:

Rectangle {
    x: rectPosition()
    y: rectPosition()
    width: 200
    height: 200
    color: "lightblue"

    function rectPosition() {
        return enabled ? 0 : 100
    }
}

構文的には、バインディングは任意の複雑さを持つことが許されています。しかし、バインディングが過度に複雑である場合（複数行にわたる場合や、命令型ループを含む場合など）、そのバインディングが単にプロパティ間の関係を記述する以上のことを行っている可能性を示唆しているかもしれません。

複雑なバインディングは、コードのパフォーマンス、可読性、保守性を低下させる可能性があります。一般に、複雑なバインディングを持つコンポーネントは再設計するか、少なくともバインディングを別の関数に移すことが推奨されます。原則として、バインディングの評価順序に依存しないようにしてください。