天天看點

QML屬性(Properties)

作者:音視訊開發老舅

1、對象(Object)

在前面對象類型處已經講明了什麼是對象,這裡再重申一下。QML 對象由類型指定,一般與類型同名,名稱以大寫字母開頭,後面跟一對大括号,在括号中包含了對象特性定義,包括 id、屬性、信号、信号處理器、方法、附加屬性和附加信号處理器等,當然也可以包含子對象。例如,前面代碼中 Rectangle 對象中包含了 id、width、color等屬性定義和 Image、Text 子對象。 詳情請參考官方文檔:QML Object Attributes

2、屬性(Properties)

屬性是對象的特性之一,可以配置設定一個靜态的值或者綁定一個動态表達式,屬性和值由一個冒号隔開,使用 “屬性 : 值” 文法進行初始化,比如前面代碼中width: 640 。屬性可以分行寫,這樣結尾可以不用分号,也可以寫在一行,中間使用分号隔開,例如:width: 640; height: 480 。

import QtQuick 2.0

Text {
    // (1) identifier
    id: thisLabel

    // (2) set x- and y-position
    x: 24; y: 16

    // (3) bind height to 2 * width
    height: 2 * width

    // (4) custom property
    property int times: 24

    // (5) property alias
    property alias anotherTimes: thisLabel.times

    // (6) set text appended by value
    text: "Greetings " + times

    // (7) font is a grouped property
    font.family: "Ubuntu"
    font.pixelSize: 24

    // (8) KeyNavigation is an attached property
    KeyNavigation.tab: otherLabel

    // (9) signal handler for property changes
    onHeightChanged: console.log('height:', height)

    // focus is neeed to receive key events
    focus: true

    // change color based on focus value
    color: focus?"red":"black"
}
           

讓我們來看看不同屬性的特點:

QT開發交流+赀料君羊:714620761
  1. id 是一個非常特殊的屬性值,它在一個 QML 檔案中被用來引用元素。id 不是一個字元串,而是一個辨別符和 QML 文法的一部分。一個 id 在一個 QML 文檔中是唯一的,并且不能被設定為其它值,也無法被查詢(它的行為更像 C++ 世界裡的指針)。
  2. 一個屬性能夠設定一個值,這個值依賴于它的類型。如果沒有對一個屬性指派,那麼它将會被初始化為一個預設值。你可以檢視特定的元素的文檔來獲得這些初始值的資訊。
  3. 一個屬性能夠依賴一個或多個其它的屬性,這種操作稱作屬性綁定。當它依賴的屬性改變時,它的值也會更新。這就像訂了一個協定,在這個例子中 height 始終是 width 的兩倍。
  4. 添加自己定義的屬性需要使用 property 修飾符,然後跟上類型,名字和可選擇的初始化值(property : )。如果沒有初始值将會給定一個系統初始值作為初始值。注意如果屬性名與已定義的預設屬性名不重複,使用 default 關鍵字你可以将一個屬性定義為預設屬性。這在你添加子元素時用得着,如果他們是可視化的元素,子元素會自動的添加預設屬性的子類型連結清單(children property list)。
  5. 另一個重要的聲明屬性的方法是使用 alias 關鍵字(property alias : )。alias 關鍵字允許我們轉發一個屬性或者轉發一個屬性對象自身到另一個作用域。我們将在後面定義元件導出内部屬性或者引用根級元素 id 會使用到這個技術。一個屬性别名不需要類型,它使用引用的屬性類型或者對象類型。
  6. text 屬性依賴于自定義的 timers(int 整型資料類型)屬性。int 整型資料會自動的轉換為 string 字元串類型資料。這樣的表達方式本身也是另一種屬性綁定的例子,文本結果會在 times 屬性每次改變時重新整理。
  7. 一些屬性是按組配置設定的屬性。當一個屬性需要結構化并且相關的屬性需要聯系在一起時,我們可以這樣使用它。另一個組屬性的編碼方式是 font{family: "UBuntu"; pixelSize: 24 }。
  8. 一些屬性是元素自身的附加屬性。這樣做是為了全局的相關元素在應用程式中隻出現一次(例如鍵盤輸入)。
  9. 對于每個元素你都可以提供一個信号操作。這個操作在屬性值改變時被調用。例如這裡我們完成了當 height(高度)改變時會使用控制台輸出一個資訊。

警告:

一個元素 id 應該隻在目前文檔中被引用。QML 提供了動态作用域的機制,後加載的文檔會覆寫之前加載文檔的元素 id 号,這樣就可以引用已加載并且沒有被覆寫的元素 id,這有點類似建立全局變量。但不幸的是這樣的代碼閱讀性很差。目前這個還沒有辦法解決這個問題,是以你使用這個機制的時候最好仔細一些甚至不要使用這種機制。如果你想向文檔外提供元素的調用,你可以在根元素上使用屬性導出的方式來提供(就是定義屬性)。

2.1 屬性更改通知

當一個屬性更改值時,它會發送一個信号來告知這個更改。要擷取這個信号,隻需要建立一個信号處理器(signal handler),它使用on<Property>Changed文法來命名。示例程式如下:

Rectangle {
    width: 640; height:480
    onWidthChanged: console.debug("Width has changed to:", width)
    onHeightChanged: console.debug("height has changed to:", width)
}
           

Rectangle 元素擁有 width 和 height 屬性,且定義了兩個信号處理器,無論何時屬性被修改了,都會自動調用它們。

2.2 清單屬性

清單是包括在方括号内,以逗号分隔的多個元素的集合。示例如下:

Item {
    children: [
        Image {},
        Text {}
    ]
}
           

如果清單中隻有一個元素,那麼可以省略掉方括号:

Item {
    children: Text {}
}
           

其實清單和 ESMAScript 的數組(Array)是類似的,其通路方式也一樣:

  • 可以用 [value1, value2, ..., valueN] 這種形式給 list 對象指派。
  • length 屬性提供了清單内元素的個數。
  • 清單内的元素通過數組下标來訪。

通路清單的示例程式如下:

Item {
	children:{
		Text {
			text: "textOne"		
		}
		Text {
			text: "textTwo"		
		}	
	}
	
	Component.onCompleted: {
		for (vat i=0; i<children.length; i++)
			console.log("text of label", i, ":", children[i].text)
	}
		
}
           

2.3 分組屬性

在某些情況下使用一個 "." 符号或分組符号将相關的屬性形成一個邏輯組。有時我們給分組屬性指派是一個個來的,類似于這樣:

Text {
    font.pixelSize: 18
    font.bold: true
}
           

其實下面這樣的寫法在形式上更貼合分組的含義:

Text {
    font { pixelSize: 18; bold: true; }
}
           

其實可以這麼了解,font 屬性的類型本身是一個對象,這個對象又有 pixelSize、bold、italic、underline 等屬性。對于類型為對象的屬性值,可以使用 "." 操作符展開對象的每一個成員對其指派,也可以通過分組符号(一對花括号)把要指派的成員放在一起給它們指派。

2.4 附加屬性

在 QML 語言的文法中,有一個附加屬性的概念,這是附加到一個對象上的額外的屬性。舉個例子,下面的 Item 對象使用了附加屬性:

import QtQuick 2.2

Item {
    width: 100
    height: 100
    
    focus: true
    keys.enabled: false
}
           

你看,Item 對象設定 keys.enabled 為false,Keys 就是 Qt Quick 提供的供 Item 處理按鍵事件的附加屬性。與附加屬性相似的概念還有附加信号處理器,我們後面再講。

繼續閱讀