Quick--組件與基本元素

• 1 簡介
• 2 根組件定義
• • 2.1 id
  • • 2.1.1 介紹
    • 2.1.2 命名規則
  • 2.2 property屬性
  • • 2.2.1 介紹
    • 2.2.2 命名規則
    • 2.2.3 自定義屬性
    • 2.2.4 屬性別名
    • 2.2.5 只讀屬性
  • 2.3 信號
  • • 2.3.1 介紹
    • 2.3.2 命名規則
  • 2.4 js代碼
  • 2.4 js文件
  • 2.4.1 js文件導入
  • 2.5 布爾表達式
  • 2.6 狀態機
• 3 內部組件
• 4 視覺元素
• • 4.1 item元素
  • 4.2 Rectangle元素
  • 4.3 Text元素
  • 4.4 Image元素
  • 4.5 MouseArea元素
• 5 非視覺元素
• 參考

1 簡介

2 根組件定義

id 自定義屬性property 信號signal JavaScript function 自帶屬性設置object properties 子控件child objects 狀態states 動畫animation、漸變transitions

2.1 id

2.1.1 介紹

在聲明組件時，可以同時聲明其“id”屬性。“id”屬性是該組件的代號，聲明該屬性的好處是，可以被它的作用域為：。同一qml文件中，每個控件都可以設置id屬性，且不能相同

2.1.2 命名規則

• 由字母組成，首字母必須小寫，以小駝峰的形式命名。
• 以控件類型結尾，例如：將Button的id設置為：xxxxBtn 或 xxxxButton，
  將Text的id設置為： xxxxTxt 或 xxxxText，將ComboBox的id設置為： xxxxCmb 或 xxxxComboBox，這樣根據id就可以知道其對應的是什么控件。
• 只有在明確知道其控件的縮寫時，才能在id中使用縮小，否則一律使用控件全稱。
• 控件默認不設置id屬性，若某個控件的id需要被使用（控件間存在關聯關系），才要設置id。例如控件的布局存在相對位置的關系或控件間的屬性在邏輯上存在依賴關系等，則需要設置id，例如：

Item{width: 200height: 300Button{id: saveBtnwidth: 60height: 30text: "Save"}Button{anchors {top: saveBtn.bottomtopMargin: 10left: saveBtn.left}width: 60height: 30visible: saveBtn.visible}}

• 當子控件要使用父控件的屬性或根據父控件設置相對位置時，不要使用父控件的id，用parent代替id。

Item {id: rootwidth: 800height: 480Rectangle{id: testRectanchors.centerIn: parentwidth: parent.width/2height: 200color: "red"Button{id: testBtnwidth: parent.width/2height: 40text: "1233"highlighted: （parent.color === "red"） ? false : true}} }

• 一個qml文件中，設置id的個數不要超過7個，多余7個，則要進行qml代碼的拆分，建議設置3到4個。
• 同一個qml文件中的控件id在文件中是通用的，但是delegate中的控件id除外，delegate中控件id只在delegate中有效，外部訪問無效。因為 delegate為Component類型，外界無法訪問。通俗點講，就是delegate一般用來承載model數據的顯示，一個id對于多個數據顯示控件，外部在使用id時，無法定位當前使用是哪個數據控件的id。

ListView {id:listViewanchors.centerIn: parentwidth: 160height: 240model: Qt.fontFamilies()delegate: ItemDelegate {id：fontDelegatetext: modelDatawidth: parent.widthhighlighted: ListView.isCurrentItemonClicked:{listView.currentIndex = indexconsole.log("clicked:", modelData)}}}ItemDelegate的id名稱fontDelegate，是不能在ItemDelegate之外被使用的。

2.2 property屬性

2.2.1 介紹

在qml代碼中，為了方便外界使用本自定義控件或者便于qml文件內部控件之間的關聯，常需要自定義一些屬性。
一個property是對象的一個屬性，可以被賦為靜態值或者是綁定到動態表達式上。一個property的值可以被其它的對象讀取。一般情況下，property屬性也可以被其它對象修改，除非該QML類型明確指定該property屬性不能被修改。

2.2.2 命名規則

屬性名稱必須是以小寫字母開頭，僅由字母、數字和下劃線組成，由 名詞或形容詞+名詞 的小駝峰形式組合而成。
當定義的屬性僅限qml內部使用時，才會用到_,這樣的私有屬性的命名必須以兩個下劃線（__）開始

property var __locale: Qt.locale()

2.2.3 自定義屬性

property <propertyType> <propertyName> : value

定義一個自定義的property屬性也就為該property屬性隱式的創建了一個value-change信號，也就是關聯了一個名為 onChanged的signal handler。就是property屬性的名稱，而且首字母要大寫。

Rectangle {property string someText: “　”onSomeTextChanged: console.log("The someText will be: " + someText)} * 自定義的屬性必需要有初始值，除了Object Types* 常見自定義的屬性類型：* bool,double,int,real,string,url,var,list* bool：true/false。* double：雙精度實數，有小數點。* int：整數，可以是負數、0、正數。* real：實數，有小數點。* string：字符串。* url：資源路徑，可以是絕對路徑或相對路徑，相對路徑時就會被轉換為 * URL對象，如果使用了Qt資源系統，就要用“qrc:///”代替“:/”。* var：基本類型是通用的類型，可以保存任意類型的值，包括lists和objects：* 任何標準的JavaScript類型都可以使用通用的var類型創建和存儲。* 如果聲明一個屬性用于存儲列表值，但不一定是存儲QML對象類型值，這個時候你就需要聲明var的property屬性。 property var someNumber: 1.5property var someString: "aaa"property var someBool: trueproperty var someList: [2,5,"one","two"]property var someObject: Rectangle {width: 100height: 100color: "red"}property var theArray: new Array()property var theDate: new Date()

任何的QML對象類型都可以被用作property屬性類型
自定義QML類型也是

property Item someItem property Rectangle someRectangle

2.2.4 屬性別名

屬性別名就是保存對另一個屬性的引用。
屬性別名需要使用alias關鍵字代替屬性定義中的property類型，右邊的值必須是合法的引用別名：

property alias <name> : aliasreference Rectangle {id: rootRect// 引用屬性property alias color: blueRect.color// 引用對象property alias theRect: blueRectcolor: "red"Rectangle {id: blueRectcolor: "#1234ff"} }

如果為一個已經存在屬性創建一個同名的屬性別名，這就會覆蓋已經存在的屬性。上面的代碼中定義的color屬性，會替代Rectangle原有的color屬性，為了避免已有屬性被覆蓋的問題，定義的屬性別名不能與已有屬性相同。
若所引用的屬性不是已經存在屬性，則定義的屬性別名要與引用的屬性名稱相同。

Rectangle {id: rootRectproperty alias count: nameList.countproperty alias currentIndex: nameList.currentIndexcolor: "red"ListView{id: nameList} } Rectangle沒有count和currentIndex屬性，則要將屬性別名與引用屬性名設置成一樣。

只有在組件完全初始化之后屬性別名才會被激活。如果未初始化的別名被引用了就會產生錯誤。為一個屬性別名產生屬性別名也會導致錯誤

property alias sureBtn: testBtn property alias text: sureBtn.text Button{id: testBtnwidth: 100height: 40text: "1233" } Component.onCompleted: console.log("text="+text) 產生的錯誤提示： Invalid alias reference. Unable to find id "sureBtn"

2.2.5 只讀屬性

readonly property <propertyType> <propertyName> : <initialValue>

只讀屬性必須在初始化的時候指定值。一旦只讀屬性被初始化了，它就不可能再被賦值了，無論是賦值(使用”=”)還是其它的方式。

2.3 信號

2.3.1 介紹

當一個信號發射了，對象可以通過signal handler被通知。

signal <signalName>[([<type> <parameter name>[, ...]])] Item{id: rootwidth: 100height: 40MouseArea{anchors.fill: parentonClicked: console.log("Click!")} }

2.3.2 命名規則

• 信號的命名規則遵循屬性的命名規則，以小駝峰的形式命名。
• 如果信號不帶參數，則一律不使用（）
• 如果信號帶參數，參數要寫參數類型。

信號參數的命名規則：

• msg+大駝峰形式
• 必須以“msg”開頭，便于標識是信號參數。

signal clicked signal hovered(string msgInfo) signal activated(real msgXPosition, real msgYPosition)

2.4 js代碼

自定義的js函數，可以帶參數，也可以不帶出參數，且參數不用指明參數類型，因為函數的參數類型默認是萬能的var類型。
函數名由字母和_組成，且首字母必須是小寫，即以小駝峰的形式命名

function addZero(num){if(num < 10)return "0"+numelsereturn num }

函數返回時不要使用圓括號。
當定義的js函數，僅能在本qml文件使用,即使私有函數時，此函數的命名才用到_, 且是以雙下劃線(__)開始 + 小駝峰的方式命名

function __factorial(a) {a = parseInt(a);if (a <= 0)return 1;elsereturn a * factorial(a - 1); }

2.4 js文件

當一個qml文件中的js代碼較多即：js函數代碼超過80行時，應根據其分類或應用邏輯單獨作成一個js文件，再將js文件導入qml文件。

2.4.1 js文件導入

qml中導入的js文件必須要有別名，別名的命名規則：
以大駝峰的形式命名
由js文件名中除了_和impl以外的字母組成

import "jsfile_impl.js" as Jsflie

在js文件中導入另一個js文件的2種方法

.import "filename_imp.js" as Filename Qt.include "filename.js"`

2.5 布爾表達式

在布爾表達式中，邏輯運算符 && 和|| 兩邊的條件表達式根據邏輯需要添加圓括號()

2.6 狀態機

• 在qml中，狀態是定義在state類型中的一系列屬性配置，不同的配置可能有不同的作用，為了方便起見,State元素都有一個when屬性，可以綁定表達式來改變狀態，當綁定的表達式評估為true，狀態改變；當表達式評估為false，狀態會退回到default state。
• 顯示一些UI控件，隱藏另一些。

StateGroup {states: [State {name: "xxx"when: visiblePropertyChanges {target: xxxBtnvisible: true}PropertyChanges {target: yyyBtnvisible: true}PropertyChanges {target: zzzBtnvisible: fasle}}] }

啟動、暫停、停止動畫。

StateGroup {states: [State {name: "start"when: 0 == animationStatePropertyChanges {target: imageAnimationrunning: true}},State {name: "pause"when: 1 == animationStatePropertyChanges {target: imageAnimationpaused: true}},State {name: "stop"when: 2 == animationStatePropertyChanges {target: imageAnimationrunning: false}}] }

改變某個特定Item的property的值。

StateGroup {states: [State {name: "color"when: bChangedPropertyChanges {target: rootRectcolor: "red"}},State {name: "enabled"when: disabledPropertyChanges {target: rootRectenabled: false}}] }

顯示一個不同的view或screen。

StateGroup {states: [State {name: "xxx"when: 0 == loaderStatePropertyChanges {target: xxxLoadersource: "Xxx.qml"}},State {name: "yyy"when: 1 == loaderStatePropertyChanges {target: xxxLoadersource: "Yyy.qml"}},State {name: "zzz"when: 2 == loaderStatePropertyChanges {target: xxxLoadersource: "Zzz.qml"}}] }

在某種新的狀態下執行某些腳本。

// statetest.js function getColor() {return "green"; }// test.qml import "statetest.js" as StateTest Rectangle{id: rectwidth: 50; height: 50color: "red"MouseArea {anchors.fill: parentonClicked: rect.state = "changedColor"} StateGroup {states:State {name: "changedColor"StateChangeScript{name: "myScript"script: rect.color = StateTest.getColor()}}} }

向用戶呈現不同的操作和功能

Rectangle {id: rectwidth: 120; height: 120color: "black"Rectangle { id: myRect; width: 50; height: 50; color: "red" }StateGroup {states:State {name: "reanchored"AnchorChanges { // 改變 myRect 的anchors屬性target: myRectanchors.top: rect.topanchors.bottom: rect.bottom}PropertyChanges {target: myRectanchors.topMargin: 10anchors.bottomMargin: 10}}}// 鼠標事件MouseArea {anchors.fill: parentonClicked: rect.state = "reanchored"} }

把指定的item換一個item父節點

Item {width: 200height: 100Rectangle {id: redRectwidth: 100height: 100color: "red"}Rectangle {id: blueRectx: redRect.widthwidth: 50height: 50color: "blue"states: State {name: "reparented"ParentChange {target: blueRectparent: redRectx: 10y: 10}}MouseArea {anchors.fill: parentonClicked: blueRect.state = "reparented"}} }

• states中每個state之間的觸發條件與PropertyChanges中的屬性之間不要有關聯，若有關聯，可能會形成死循環。
• 在qml中使用states時，一定要加上父層StateGroup，這樣可以避免與原始控件中state名相同的state相沖突，產生無法預料的問題。
• 能用條件運算符替代states的地方，盡量用條件運算符，不要用states。條件運算符的執行速度比state快。

StateGroup {states:State {name: "name"when: bChangedPropertyChanges {target: rootcolor: "red"}} } 應該修改為 color: bChanged ? "red" : "white"`

同一個State中有多個PropertyChanges，PropertyChanges的target不能設置一樣，否則只執行第一個PropertyChanges。

StateGroup {states:State {name: "name"when: bChangedPropertyChanges {target: rootcolor: "red"}PropertyChanges {target: rootborder.color: "red"}} } 應該修改為 StateGroup {states:State {name: "name"when: bChangedPropertyChanges {target: rootcolor: "red"border.color: "red"}} }

3 內部組件

與“根組件定義”相同，但是其屬性、信號、方法命名需添加雙下劃線("__")前綴。

Item {id: rootwidth: 800height: 480Item {id: subItemproperty bool __updateState：falsesignal __clickedfunction __doSomething(x){return x+subItem.x}width: 400height: 400}}

4 視覺元素

元素可以分為視覺元素和非視覺元素。視覺元素（如Rectangle）具有幾何形狀，通常在屏幕上顯示一個區域。非視覺元素（如Timer）提供一般用于操作視覺元素的常規功能。
基本視覺元素，例如Item，Rectangle，Text，Image和MouseArea。但是，通過使用Qt Quick Controls 2模塊，可以創建由標準平臺組件（例如按鈕，標簽和滑塊）構建的用戶界面。

4.1 item元素

Item是所有視覺元素的基礎元素，因為所有其他視覺元素都繼承自Item。它本身不會繪制任何內容，而是定義所有可視元素共有的所有屬性：

4.2 Rectangle元素

該Rectangle擴展Item并增加了填充顏色吧。此外，它支持由border.color和定義的邊框border.width。要創建圓角矩形，可以使用radius屬性。

Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"}Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8}

• 有效的顏色值是SVG顏色名稱中的顏色（請參閱 http://www.w3.org/TR/css3-color/#svg-color）。您可以以不同的方式在QML中提供顏色，但是最常見的方式是RGB字符串（’＃FF4444’）或作為顏色名稱（例如’white’）。
• 矩形還支持自定義漸變

Rectangle {id: rect1x: 12; y: 12width: 176; height: 96gradient: Gradient {GradientStop { position: 0.0; color: "lightsteelblue" }GradientStop { position: 1.0; color: "slategray" }}border.color: "slategray"} 梯度由一系列梯度停止點定義。每個停靠點都有位置和顏色。該位置標記了y軸上的位置（0 =頂部，1 =底部）。對的顏色GradientStop標記的顏色在該位置。

無法創建成角度的漸變。為此，最好使用預定義的圖像。一種可能性是僅用漸變旋轉矩形，但要注意，旋轉的矩形的幾何形狀不會改變，因此會引起混亂，因為元素的幾何形狀與可見區域不同。從作者的角度來看，在這種情況下最好使用設計的漸變圖像。

4.3 Text元素

具體使用見QML學習(四)——<Text顯示>
要顯示文本，可以使用Text元素。它最顯著的屬性是texttype 的屬性string。元素根據給定的文本和所使用的字體計算其初始寬度和高度。字體可以使用字體屬性組的影響（例如font.family，font.pixelSize…）。要更改文本的顏色，只需使用color屬性。

Text {text: "The quick brown fox"color: "#303030"font.family: "Ubuntu"font.pixelSize: 28}

可以使用horizontalAlignment和verticalAlignment屬性將文本對齊到每一邊和中心。要進一步增強文本渲染效果，可以使用style和styleColor屬性，該屬性允許您以輪廓，凸起和凹陷模式渲染文本。對于較長的文本，您通常希望定義一個斷點位置，例如A very…long text，這可以使用elide屬性來實現。該elide屬性允許您將滑動位置設置為文本的左側，右側或中間。如果您不希望出現“省略”模式的“ …”但仍然希望看到全文，則還可以使用wrapMode屬性將文本換行（僅在顯式設置寬度時才有效）：

Text {width: 40; height: 120text: 'A very long text'// '...' shall appear in the middleelide: Text.ElideMiddle// red sunken text stylingstyle: Text.SunkenstyleColor: '#FF4444'// align text to the topverticalAlignment: Text.AlignTop// only sensible when no elide mode// wrapMode: Text.WordWrap }

一個Text元素只顯示給定的文本。它不呈現任何背景裝飾。除了渲染的文本，該Text元素也是透明的。為文本元素提供合理的背景是整體設計的一部分。
請注意，Text初始寬度（高度）取決于文本字符串和字體集。甲Text沒有設定寬度和沒有文本元素將不可見，作為初始寬度將為0。
通常，當您要布局Text元素時，需要區分在Text元素邊界框內對齊文本還是在元素邊界框本身之間對齊。在前一種情況下，您想使用horizontalAlignment和verticalAlignment屬性，在后一種情況下，您想操縱元素的幾何形狀或使用錨點。

4.4 Image元素

一個Image元素能夠顯示各種格式的圖像（例如PNG，JPG，GIF，BMP，WEBP）。有關支持的圖像格式的完整列表，請查閱Qt文檔。除了source提供圖像URL 的明顯屬性外，它還包含一個fillMode控制大小調整行為的屬性。

Image {x: 12; y: 12// width: 72// height: 72source: "assets/triangle_red.png"}Image {x: 12+64+12; y: 12// width: 72height: 72/2source: "assets/triangle_red.png"fillMode: Image.PreserveAspectCropclip: true}

URL可以是帶有正斜杠（“ ./images/home.png”）的本地路徑，也可以是Web鏈接（例如“ http://example.org/home.png ”）。
Image元素使用PreserveAspectCrop還應該啟用裁剪，以避免在Image邊界外渲染圖像數據。默認情況下，裁剪是禁用的（clip：false）。您需要啟用剪貼（clip：true）來將繪畫限制為邊界矩形的元素。可以在任何視覺元素上使用。

4.5 MouseArea元素

要與這些元素進行交互，您通常會使用MouseArea。這是一個矩形的不可見項，您可以在其中捕獲鼠標事件。當用戶與可視部件交互時，鼠標區域通常與可見項一起使用以執行命令。

Rectangle {id: rect1x: 12; y: 12width: 76; height: 96color: "lightsteelblue"MouseArea {id: areawidth: parent.widthheight: parent.heightonClicked: rect2.visible = !rect2.visible}}Rectangle {id: rect2x: 112; y: 12width: 76; height: 96border.color: "lightsteelblue"border.width: 4radius: 8}

5 非視覺元素

參考

1、qml編碼規范與指導
2、A Book about Qt5
3、QML學習(四)——<Text顯示>
4、QML圖像、狀態和動畫–縮放、旋轉和平移

總結

以上是生活随笔為你收集整理的Quick--组件与基本元素的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。