為什么需要將屬性導出

在進行QML應用開發時，很多時候都是以組件的形式規劃軟件的，然而一個組件又由許多子元素組成和描述。當我們需要從一個組件引用另一個組件的屬性時，這時候就需要將被引用組件的屬性導出。例如：當一個組件是由數據驅動的，那么就必須將被數據驅動的屬性導出，供其他組件引用使用和修改。

屬性導出

將一個組件的屬性導出，有兩種形式：

（1）自定義屬性。

（2）屬性別名。

為一個組件類型自定義屬性，其語法格式為：

【readonly】property 【:】

property是固定寫法。

：表示屬性的類型。目前支持的屬性類型可以是QML基本類型（bool、double、int、list、real、string、url）；可以是QML對象類型；也可以使用var指定的泛型類型。

：表示屬性名稱。屬性名稱必須以小寫字母開頭，且只能包含字母、數字和下劃線

：表示屬性值，可以是靜態值或將其綁定到動態表達式。

自定義的屬性默認有一個屬性值改變信號，我們可以使用onChanged信號處理程序來接收該信號，例如下列代碼：

propertyaliaslabel:labelText.text
propertycolortint:"blue"
onLabelChanged:console.log("aliasLabelChanged")
onTintChanged:console.log("tintChanged")

上述代碼中，onLabelChanged信號處理程序用于接收label的改變信號；onTintChanged用于接收Tint的改變信號。

為一個組件定義一個屬性別名，寫法如下所示：

[default]propertyalias:

property alias是標準寫法，不能更改。

：是導出屬性的別名。其他組件則通過該名稱引用到對應的屬性。

：指別名引用。

聲明屬性別名與普通的屬性定義類似，只是它需要alias關鍵字而不是屬性類型，并且屬性聲明的右側必須是一個有效的別名引用。

例如：

propertyaliasbutton:item.button

上述代碼中，別名則是指item組件實例中的按鈕組件實例。

在 Qt Design Studio和QtCreate設計模式中，我們可以使用Navigator中的(Export)按鈕將組件導出為具有有效別名引用的屬性名：

注：導出的屬性可以在『Connections』視圖下的Properties中查看。

注：在其他文件代碼中使用的組件必須導出為屬性。

注：在QtCreator設計模式下導出組件屬性的方法與Qt Design Studio是一樣的。

一個實例

看一個具體實例，下面代碼是自定義的一個按鈕（Button）：

importQtQuick2.0

Item{
id:container

propertyaliaslabel:labelText.text

propertycolortint:"blue"
signalclicked

width:labelText.width+70;height:labelText.height+18

BorderImage{
anchors{fill:container;leftMargin:-6;topMargin:-6;rightMargin:-8;bottomMargin:-8}
source:'images/box-shadow.png'
border.left:10;border.top:10;border.right:10;border.bottom:10
}

Image{anchors.fill:parent;source:"images/cardboard.png";antialiasing:true}

Rectangle{
anchors.fill:container;color:container.tint;visible:container.tint!=""
opacity:0.25
}

Text{id:labelText;font.pixelSize:15;anchors.centerIn:parent}

MouseArea{
anchors{fill:parent;leftMargin:-20;topMargin:-20;rightMargin:-20;bottomMargin:-20}
onClicked:container.clicked()
}
}

上述代碼中，自定義按鈕的height、width參數由labelText標簽文本來確定，然后創建一個Rectangle用于顯示按鈕顏色，創建MouseArea用于接收鼠標的點擊事件，并定義了一個clicked信號：

signalclicked

在MouseArea類型的點擊事件處理程序中發出該信號：

MouseArea{
anchors{fill:parent;leftMargin:-20;topMargin:-20;rightMargin:-20;bottomMargin:-20}
onClicked:container.clicked()
}

使用Image類型導入一張圖片，作為按鈕的背景：

Image{anchors.fill:parent;source:"images/cardboard.png";antialiasing:true}

因為按鈕的文本和顏色需要被其他組件類型控制（即，在其他組件的屬性綁定或邏輯處理中需要改變按鈕的文本和顏色值），所以添加了一個顏色屬性（用于表示按鈕的顏色）和label別名（引用labelText元素的text屬性）：

//label別名
propertyaliaslabel:labelText.text

//顏色屬性
propertycolortint:"blue"

通過上述代碼，將屬性導出后，在其他組件類型中則可通過label和tint訪問按鈕組件內的屬性。

在設計中，有效的別名引用有以下幾個特性（以上述例子中代碼為例）：

（1）只能指向聲明了屬性別名的組件中的組件實例或屬性。

（2）不能包含JavaScript表達式。例如下列寫法是錯誤的：

propertyaliaslabel:console.log("clicked")

（3）除了聲明屬性別名的組件外，不能指向其他類型的組件。

（4）不能指向附加的屬性。

在別名引用的寫法格式上，別名引用必須指定為：， .或..。

以下幾種寫法都是錯誤的：

propertyaliaslabel:myName
propertystringmyName:"iriczhao"

上述代碼位置交換一下也是錯誤的。下列從根元素（container為根元素的id）引用的寫法也是錯誤的：

propertystringmyName:"iriczhao"
propertyaliaslabel:container.myName

（5）不能引用深度超過3層的嵌套屬性。例如下列錯誤的用法：

//該屬性引用將不能正常工作
propertyaliascolor:myItem.myRect.border.color

Item{
id:myItem
propertyRectanglemyRect
}

審核編輯：劉清