QML Qt.binding

Qt.bindding的执行由QML引擎监控，一旦满足绑定条件就会响应。

第一种：为属性绑定一段代码

Rectangle{
        implicitWidth: 300;
        implicitHeight: 200;
        TextField {
              id: control1;
              implicitWidth: parent.width;
              implicitHeight: 60;
              anchors.top: parent.top;
              placeholderText: qsTr("Enter description");

              background: Rectangle {
                  implicitWidth: 300;
                  implicitHeight: 60;
                  color: control1.enabled ? "transparent" : "#353637";
                  border.color: control1.enabled ? "#21be2b" : "transparent";
              }

        }

        TextField {
              id: control2;
              implicitWidth: parent.width;
              implicitHeight: 60;
              anchors.top: control1.bottom;
              anchors.topMargin: 5;
              readOnly: true;

              background: Rectangle {
                  implicitWidth: 300;
                  implicitHeight: 60;
                  color: control2.enabled ? "transparent" : "#353637";
                  border.color: control2.enabled ? "#21be2b" : "transparent";
              }
        }
        // 界面初始化之后，把control2的text绑定到control1上，这样control1的text变化，control2的text同步变化
        Component.onCompleted: {
                       control2.text = Qt.binding(function(){return control1.text});
                       }
}

绑定之后的属性(control2.text)如果有control2.text="***"这样的赋值行为，那么Qt.binding的效果将会失效。

第二种：动态创建对象时初始化属性

新建一个DynamicText.qml文件如下：

import QtQuick 2.0

  Text {
      id: textElement
      width: 200
      height: 200
      text: "Default text"
      property string dynamicText: "Dynamic text"
      onTextChanged: console.log(text)
  }

新建一个main.qml文件如下：动态创建对象Qt.createObject()

import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle{
	implicitWidth: 100;
	implicitHeight: 80;
	Item {
		id: testObj
        property string dynamicText: "dynamicText text"

        Component.onCompleted: {
			 var c = Qt.createComponent("DynamicText.qml"); 
			 // obj1.text 与 testObj.dynamicText+' extra text'绑定，
			 var obj1 = c.createObject(testObj, { 'text': Qt.binding(function() { return dynamicText + ' extra text' }) })
			 testObj.dynamicText = "Modified testObj dynamicText"
		  
			 // this.dynamicText使用DynamicText.qml里面的dynamicText属性
			 // obj2.text与obj2.dynamicText绑定
			 var obj2 = c.createObject(testObj, { 'text': Qt.binding(function() { return this.dynamicText + ' extra text' }) })
			 obj2.dynamicText = "Modified dynamic text" // 会影响到obj2.text
		}
    }
}

另一种动态创建的main.qml: 

import QtQuick 2.12
import QtQuick.Controls 2.12
Rectangle{
	implicitWidth: 100;
	implicitHeight: 80;
	
  Item {
      id: root
      property string dynamicText: "Root text"

      Loader {
          id: loaderOne
          onLoaded: root.dynamicText = "Modified root text"
      }

      Loader {
          id: loaderTwo
          onLoaded: item.dynamicText = "Modified dynamic text"; // item代表DynamicText.qml的根节点
      }

      Component.onCompleted: {
          loaderOne.setSource("DynamicText.qml", { 'text': Qt.binding(function() { return dynamicText + ' extra text' }) })
          loaderTwo.setSource("DynamicText.qml", { 'text': Qt.binding(function() { return this.dynamicText + ' extra text' }) })
      }
  }
}

1. Qt.binding()中可以访问对象的属性
2. Qt.binding()中可以访问对象的方法
3. 可以使用QML内置的JavaScript的对象

常见的绑定形式：

Rectangle{
    implicitWidth: 100;
    implicitHeight: 100;
    Rectangle{
        anchors.top=parent.top; // 这种也是绑定，Qt.binding()不能应用在这种形式当中
    }
}