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

備考

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

以下の簡単な例を考えてみましょう。

import QtQuick 2.7
import QtQuick.Controls 2.0

ApplicationWindow {
    visible: true
    width: 400
    height: 640

    Rectangle{
        id: rect
        anchors.centerIn: parent
        height: 100
        width: parent.width
        color: "blue"
    }
}

上記の例では、 Rectangleの幅はその親の幅にバインドされています。実行中のアプリケーションウィンドウの幅を変更すると、矩形の幅も変更されます。

より複雑な例

簡単な例では、矩形の幅を親の幅に設定するだけです。もっと複雑な例を考えてみましょう：

ApplicationWindow {
    visible: true
    width: 400
    height: 640

    Rectangle{
        id: rect
        anchors.centerIn: parent
        height: 100
        width: parent.width/2 + parent.width/3
        color: "blue"
    }
}

この例では、バインドされる値に対して算術演算を実行します。実行中のアプリケーションウィンドウのサイズを最大幅に変更すると、長方形とアプリケーションウィンドウの間隔が広がり、その逆もあります。

動的に作成されたQMLファイルを使用してバインディングを作成する

直接宣言してQMLファイルのインスタンスを使用する場合、すべてのpropertyがバインディングを作成します。これは上の例で説明されています。

これはコンポーネントを動的に作成する方法です。

var component = Qt.createComponent("Popup.qml");
var popup = component.createObject(parent, {"width": mainWindow.width, "height": mainWindow.height});

mainWindowのサイズが変わると、作成されたPopUpサイズには影響しません。バインディングを作成するには、次のようにpopupのサイズを設定します。

var component = Qt.createComponent("Popup.qml");
var options = {
    "width": Qt.binding(function() { return mainWindow.width }),
    "height": Qt.binding(function() { return mainWindow.height }),
};
var popup = component.createObject(parent, options);

今度はPopUpのサイズはmainWindow依存しmainWindow 。