プロパティのバインディング

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

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

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

概要

プロパティのバインディングを作成するには、プロパティに、目的の値を返すJavaScript式を割り当てます。最も単純な場合、バインディングは別のプロパティへの参照となります。次の例では、青いRectangle の高さが、その親要素の高さにバインドされています。

Rectangle {
    width: 200; height: 200

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

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

QMLは標準に準拠したJavaScriptエンジンを使用しているため、バインディングには有効なJavaScript式や文を何でも含めることができます。バインディングでは、オブジェクトのプロパティへのアクセス、メソッドの呼び出し、Date やMath などの組み込みJavaScriptオブジェクトの使用が可能です。以下に、前述の例におけるその他のバインディングの例を示します：

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

構文的には、バインディングは任意の複雑さを持つことが許されています。しかし、バインディングが過度に複雑である場合（複数行にわたるものや、命令型ループを含む場合など）、そのバインディングが単にプロパティ間の関係を記述する以上の目的で使用されている可能性を示唆しているかもしれません。 複雑なバインディングは、コードのパフォーマンス、可読性、保守性を低下させる可能性があります。複雑なバインディングを持つコンポーネントは再設計するか、少なくともバインディングを別の関数に分離することを検討するとよいでしょう。一般的なルールとして、ユーザーはバインディングの評価順序に依存すべきではありません。

JavaScript からのプロパティバインディングの作成

バインディングを持つプロパティは、必要に応じて自動的に更新されます。ただし、後で JavaScript ステートメントによってそのプロパティに静的な値が割り当てられた場合、バインディングは削除されます。

たとえば、以下のRectangle は、当初、height が常にwidth の2倍になるように設定されています。しかし、スペースキーが押されると、width*3 の現在の値が静的値としてheight に割り当てられます。その後、 width が変更されても、height はこの値のまま固定されます。静的値の割り当てによって、バインディングが解除されるためです。

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = width * 3
    }
}

矩形に固定の高さを設定し、自動更新を停止することが目的であれば、これは問題になりません。しかし、width とheight の間に新しい関係を確立することが目的である場合は、新しいバインディング式を代わりにQt.binding()関数で囲む必要があります：

import QtQuick 2.0

Rectangle {
    width: 100
    height: width * 2

    focus: true
    Keys.onSpacePressed: {
        height = Qt.binding(function() { return width * 3 })
    }
}

これで、スペースキーが押された後も、長方形の高さは引き続き自動更新され、常に幅の3倍になるようになります。

バインディングの上書きに関するデバッグ

QMLアプリケーションにおけるバグの一般的な原因として、JavaScript文から静的な値でバインディングを誤って上書きしてしまうことが挙げられます。開発者がこの種の問題を特定しやすくするため、QMLエンジンは、命令型代入によってバインディングが失われた際にメッセージを出力する機能を備えています。

このようなメッセージを生成するには、qt.qml.binding.removal というログカテゴリの情報出力機能を有効にする必要があります。例えば、次のように呼び出します：

QLoggingCategory::setFilterRules(QStringLiteral("qt.qml.binding.removal.info=true"));

ロギングカテゴリからの出力を有効にする方法の詳細については、『QLoggingCategory 』のドキュメントを参照してください。

なお、状況によってはバインディングを上書きすることも十分に妥当であることに留意してください。QMLエンジンによって生成されるメッセージは、あくまで診断の補助として扱うべきであり、さらなる調査なしに必ずしも問題の証拠と見なすべきではありません。

this とプロパティバインディングの併用

JavaScript からプロパティバインディングを作成する際、this キーワードを使用することで、バインディングを受け取るオブジェクトを参照することができます。これは、プロパティ名の曖昧さを解消するのに役立ちます。

たとえば、以下の `Component.onCompleted ` ハンドラは、Item のスコープ内で定義されています。このスコープ内では、width はRectangle の幅ではなく、Item の幅を指します。Rectangle のheight を、その自身のwidth にバインドするには、バインド式でthis.width （あるいはrect.width ）を明示的に参照する必要があります：

Item {
    width: 500
    height: 500

    Rectangle {
        id: rect
        width: 100
        color: "yellow"
    }

    Component.onCompleted: {
        rect.height = Qt.binding(function() { return this.width * 2 })
        console.log("rect.height = " + rect.height) // prints 200, not 1000
    }
}