為什么需要將屬性導(dǎo)出

在進(jìn)行QML應(yīng)用開(kāi)發(fā)時(shí)，很多時(shí)候都是以組件的形式規(guī)劃軟件的，然而一個(gè)組件又由許多子元素組成和描述。當(dāng)我們需要從一個(gè)組件引用另一個(gè)組件的屬性時(shí)，這時(shí)候就需要將被引用組件的屬性導(dǎo)出。例如：當(dāng)一個(gè)組件是由數(shù)據(jù)驅(qū)動(dòng)的，那么就必須將被數(shù)據(jù)驅(qū)動(dòng)的屬性導(dǎo)出，供其他組件引用使用和修改。

屬性導(dǎo)出

將一個(gè)組件的屬性導(dǎo)出，有兩種形式：

（1）自定義屬性。

（2）屬性別名。

為一個(gè)組件類型自定義屬性，其語(yǔ)法格式為：

【readonly】property 【:】

property是固定寫(xiě)法。

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

：表示屬性名稱。屬性名稱必須以小寫(xiě)字母開(kāi)頭，且只能包含字母、數(shù)字和下劃線

：表示屬性值，可以是靜態(tài)值或?qū)⑵浣壎ǖ絼?dòng)態(tài)表達(dá)式。

自定義的屬性默認(rèn)有一個(gè)屬性值改變信號(hào)，我們可以使用onChanged信號(hào)處理程序來(lái)接收該信號(hào)，例如下列代碼：

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

上述代碼中，onLabelChanged信號(hào)處理程序用于接收l(shuí)abel的改變信號(hào)；onTintChanged用于接收Tint的改變信號(hào)。

為一個(gè)組件定義一個(gè)屬性別名，寫(xiě)法如下所示：

[default]propertyalias:

property alias是標(biāo)準(zhǔn)寫(xiě)法，不能更改。

：是導(dǎo)出屬性的別名。其他組件則通過(guò)該名稱引用到對(duì)應(yīng)的屬性。

：指別名引用。

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

例如：

propertyaliasbutton:item.button

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

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

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

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

注：在QtCreator設(shè)計(jì)模式下導(dǎo)出組件屬性的方法與Qt Design Studio是一樣的。

一個(gè)實(shí)例

看一個(gè)具體實(shí)例，下面代碼是自定義的一個(gè)按鈕（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參數(shù)由labelText標(biāo)簽文本來(lái)確定，然后創(chuàng)建一個(gè)Rectangle用于顯示按鈕顏色，創(chuàng)建MouseArea用于接收鼠標(biāo)的點(diǎn)擊事件，并定義了一個(gè)clicked信號(hào)：

signalclicked

在MouseArea類型的點(diǎn)擊事件處理程序中發(fā)出該信號(hào)：

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

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

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

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

//label別名
propertyaliaslabel:labelText.text

//顏色屬性
propertycolortint:"blue"

通過(guò)上述代碼，將屬性導(dǎo)出后，在其他組件類型中則可通過(guò)label和tint訪問(wèn)按鈕組件內(nèi)的屬性。

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

（1）只能指向聲明了屬性別名的組件中的組件實(shí)例或?qū)傩浴?/p>

（2）不能包含JavaScript表達(dá)式。例如下列寫(xiě)法是錯(cuò)誤的：

propertyaliaslabel:console.log("clicked")

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

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

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

以下幾種寫(xiě)法都是錯(cuò)誤的：

propertyaliaslabel:myName
propertystringmyName:"iriczhao"

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

propertystringmyName:"iriczhao"
propertyaliaslabel:container.myName

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

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

Item{
id:myItem
propertyRectanglemyRect
}

審核編輯：劉清