可以為 qml 對象中的屬性配置設定兩種類型的值 - 靜态值和綁定表達式,後者也稱為屬性綁定。
靜态值:一個不依賴于其他屬性的常數值。
綁定表達式:一個用于描述屬性間依賴關系的 javascript 表達式。
屬性綁定是 qml 的一個核心特性,允許指定不同對象屬性之間的依賴關系。當屬性的依賴項(屬性綁定中的變量)的值發生改變時,屬性将根據指定的關系自動更新。
<a href="#%e7%ae%80%e8%bf%b0">簡述</a>
<a href="#%e9%9d%99%e6%80%81%e5%80%bc">靜态值</a>
<a href="#%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">屬性綁定</a>
<a href="#%e4%bd%bf%e7%94%a8%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">使用屬性綁定</a>
<a href="#%e4%bb%8e-javascript-%e5%88%9b%e5%bb%ba%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a">從 javascript 建立屬性綁定</a>
<a href="#%e5%9c%a8%e5%b1%9e%e6%80%a7%e7%bb%91%e5%ae%9a%e4%b8%ad%e4%bd%bf%e7%94%a8-this">在屬性綁定中使用 this</a>
所謂靜态值,就是一個不依賴于其他屬性的常數值。例如:<code>width : 100</code>,其中 100 就是一個靜态值。
下面的示例,将 rectangle 的 width 和 height 均配置設定為靜态值。
既然藍色 rectangle 的 width 和 height 都是靜态值,那麼當父 rectangle 大小發生變化時,藍色 rectangle 的大小必然不會改變。
屬性綁定,簡單的了解就是一個綁定表達式,用于描述屬性之間的依賴關系。例如:<code>width : parent.width / 2</code>。
qml 引擎作為屬性綁定的幕後推手,在時刻監視屬性的依賴項,當檢測到任何依賴項的值發生改變後,就會自動重新計算綁定表達式,并為屬性配置設定新的結果。
要建立一個屬性綁定,需要為屬性配置設定一個 javascript 表達式,該表達式将計算所需的值。最簡單的情況,綁定是對另一屬性的引用。
下面的示例,将藍色 rectangle 的 width 綁定到其 parent 的 width:
每當父 rectangle 的 width 發生變化,藍色 rectangle 的 width 就會自動更新為相同的值。
綁定可以包含任何有效的 javascript 表達式或語句,因為 qml 使用了一個符合标準的 javascript 引擎。綁定可以通路對象屬性、調用方法、并使用内置的 javascript 對象(例如:date、math)。下面是上述示例的其他可能性綁定:
在文法上,綁定允許具有任意複雜性(例如:涉及多行或指令循環)。但是,如果綁定過于複雜,可能會降低代碼性能、可讀性、和可維護性。比較好的方法是:重新設計具有複雜綁定的元件,或者至少将綁定轉換為單獨的函數。
具有綁定的屬性将根據需要自動更新,但是,如果稍後從 javascript 語句為該屬性重新配置設定一個靜态值,則将會移除綁定。
例如,下面的藍色 rectangle 最初確定其 width 總是其 parent 的 width 的 1/4。但是,當按下空格鍵時,parent.width / 2 将作為靜态值指派給 width。随後,即使其 parent 的 width 發生變化,其 width 也将保持不變,因為靜态值的配置設定移除了綁定。
如果目的是為了給藍色 rectangle 一個固定的 width 并停止自動更新,那麼這沒有任何問題。但是,如果是為了給 width 和其 parent 的 width 建立一個新的關系,那麼新的綁定表達式必須被包裹在 qt.binding() 函數中:
現在,按下空格鍵後,矩形的高度将繼續自動更新,始終為其 parent 的 width 的 1/2。
當從 javascript 建立一個屬性綁定時,this 關鍵字可用于引用接收綁定的對象,這有助于解決屬性名稱産生的歧義。
例如,下面的 component.oncompleted 處理程式在 item 的範圍内定義。此範圍内,width 是指 item 的 width,而不是 rectangle 的 width。要将 rectangle 的 height 綁定到其自身的 width,綁定表達式必須顯式地引用 this.width(或者 rect.width):
可以看出,this 指向的是接收 qt.binding() 的傳回值的對象。在這裡,可以了解為 rect 表示的對象。
注意: this 的值不是在屬性綁定之外定義的。