オブジェクトのプロパティには静的な値を代入することができます。しかし、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
    }
}

構文上、バインディングは任意の複雑さを持つことが許されています。しかし、バインディングが過度に複雑な場合、例えば複数行にわたったり、命令的なループが含まれたりする場合、バインディングがプロパティの関係を記述する以上のことを行っている可能性があります。

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