Quick--组件与基本元素
Quick--組件與基本元素
- 1 簡(jiǎn)介
- 2 根組件定義
- 2.1 id
- 2.1.1 介紹
- 2.1.2 命名規(guī)則
- 2.2 property屬性
- 2.2.1 介紹
- 2.2.2 命名規(guī)則
- 2.2.3 自定義屬性
- 2.2.4 屬性別名
- 2.2.5 只讀屬性
- 2.3 信號(hào)
- 2.3.1 介紹
- 2.3.2 命名規(guī)則
- 2.4 js代碼
- 2.4 js文件
- 2.4.1 js文件導(dǎo)入
- 2.5 布爾表達(dá)式
- 2.6 狀態(tài)機(jī)
- 3 內(nèi)部組件
- 4 視覺(jué)元素
- 4.1 item元素
- 4.2 Rectangle元素
- 4.3 Text元素
- 4.4 Image元素
- 4.5 MouseArea元素
- 5 非視覺(jué)元素
- 參考
1 簡(jiǎn)介
2 根組件定義
id 自定義屬性property 信號(hào)signal JavaScript function 自帶屬性設(shè)置object properties 子控件child objects 狀態(tài)states 動(dòng)畫(huà)animation、漸變transitions2.1 id
2.1.1 介紹
在聲明組件時(shí)，可以同時(shí)聲明其“id”屬性。“id”屬性是該組件的代號(hào)，聲明該屬性的好處是，可以被它的作用域?yàn)?#xff1a;。同一qml文件中，每個(gè)控件都可以設(shè)置id屬性，且不能相同
2.1.2 命名規(guī)則
- 由字母組成，首字母必須小寫(xiě)，以小駝峰的形式命名。
- 以控件類(lèi)型結(jié)尾，例如：將Button的id設(shè)置為：xxxxBtn 或 xxxxButton，
將Text的id設(shè)置為： xxxxTxt 或 xxxxText，將ComboBox的id設(shè)置為： xxxxCmb 或 xxxxComboBox，這樣根據(jù)id就可以知道其對(duì)應(yīng)的是什么控件。 - 只有在明確知道其控件的縮寫(xiě)時(shí)，才能在id中使用縮小，否則一律使用控件全稱(chēng)。
- 控件默認(rèn)不設(shè)置id屬性，若某個(gè)控件的id需要被使用（控件間存在關(guān)聯(lián)關(guān)系），才要設(shè)置id。例如控件的布局存在相對(duì)位置的關(guān)系或控件間的屬性在邏輯上存在依賴(lài)關(guān)系等，則需要設(shè)置id，例如：
- 當(dāng)子控件要使用父控件的屬性或根據(jù)父控件設(shè)置相對(duì)位置時(shí)，不要使用父控件的id，用parent代替id。
- 一個(gè)qml文件中，設(shè)置id的個(gè)數(shù)不要超過(guò)7個(gè)，多余7個(gè)，則要進(jìn)行qml代碼的拆分，建議設(shè)置3到4個(gè)。
- 同一個(gè)qml文件中的控件id在文件中是通用的，但是delegate中的控件id除外，delegate中控件id只在delegate中有效，外部訪問(wèn)無(wú)效。因?yàn)?delegate為Component類(lèi)型，外界無(wú)法訪問(wèn)。通俗點(diǎn)講，就是delegate一般用來(lái)承載model數(shù)據(jù)的顯示，一個(gè)id對(duì)于多個(gè)數(shù)據(jù)顯示控件，外部在使用id時(shí)，無(wú)法定位當(dāng)前使用是哪個(gè)數(shù)據(jù)控件的id。
2.2 property屬性
2.2.1 介紹
在qml代碼中，為了方便外界使用本自定義控件或者便于qml文件內(nèi)部控件之間的關(guān)聯(lián)，常需要自定義一些屬性。
一個(gè)property是對(duì)象的一個(gè)屬性，可以被賦為靜態(tài)值或者是綁定到動(dòng)態(tài)表達(dá)式上。一個(gè)property的值可以被其它的對(duì)象讀取。一般情況下，property屬性也可以被其它對(duì)象修改，除非該QML類(lèi)型明確指定該property屬性不能被修改。
2.2.2 命名規(guī)則
屬性名稱(chēng)必須是以小寫(xiě)字母開(kāi)頭，僅由字母、數(shù)字和下劃線組成，由 名詞或形容詞+名詞 的小駝峰形式組合而成。
當(dāng)定義的屬性僅限qml內(nèi)部使用時(shí)，才會(huì)用到_,這樣的私有屬性的命名必須以兩個(gè)下劃線（__）開(kāi)始
2.2.3 自定義屬性
property <propertyType> <propertyName> : value定義一個(gè)自定義的property屬性也就為該property屬性隱式的創(chuàng)建了一個(gè)value-change信號(hào)，也就是關(guān)聯(lián)了一個(gè)名為 onChanged的signal handler。就是property屬性的名稱(chēng)，而且首字母要大寫(xiě)。
Rectangle {property string someText: “ ”onSomeTextChanged: console.log("The someText will be: " + someText)} * 自定義的屬性必需要有初始值，除了Object Types* 常見(jiàn)自定義的屬性類(lèi)型：* bool,double,int,real,string,url,var,list* bool：true/false。* double：雙精度實(shí)數(shù)，有小數(shù)點(diǎn)。* int：整數(shù)，可以是負(fù)數(shù)、0、正數(shù)。* real：實(shí)數(shù)，有小數(shù)點(diǎn)。* string：字符串。* url：資源路徑，可以是絕對(duì)路徑或相對(duì)路徑，相對(duì)路徑時(shí)就會(huì)被轉(zhuǎn)換為 * URL對(duì)象，如果使用了Qt資源系統(tǒng)，就要用“qrc:///”代替“:/”。* var：基本類(lèi)型是通用的類(lèi)型，可以保存任意類(lèi)型的值，包括lists和objects：* 任何標(biāo)準(zhǔn)的JavaScript類(lèi)型都可以使用通用的var類(lèi)型創(chuàng)建和存儲(chǔ)。* 如果聲明一個(gè)屬性用于存儲(chǔ)列表值，但不一定是存儲(chǔ)QML對(duì)象類(lèi)型值，這個(gè)時(shí)候你就需要聲明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對(duì)象類(lèi)型都可以被用作property屬性類(lèi)型
自定義QML類(lèi)型也是
2.2.4 屬性別名
屬性別名就是保存對(duì)另一個(gè)屬性的引用。
屬性別名需要使用alias關(guān)鍵字代替屬性定義中的property類(lèi)型，右邊的值必須是合法的引用別名：
如果為一個(gè)已經(jīng)存在屬性創(chuàng)建一個(gè)同名的屬性別名，這就會(huì)覆蓋已經(jīng)存在的屬性。上面的代碼中定義的color屬性，會(huì)替代Rectangle原有的color屬性，為了避免已有屬性被覆蓋的問(wèn)題，定義的屬性別名不能與已有屬性相同。
若所引用的屬性不是已經(jīng)存在屬性，則定義的屬性別名要與引用的屬性名稱(chēng)相同。
只有在組件完全初始化之后屬性別名才會(huì)被激活。如果未初始化的別名被引用了就會(huì)產(chǎn)生錯(cuò)誤。為一個(gè)屬性別名產(chǎn)生屬性別名也會(huì)導(dǎo)致錯(cuò)誤
property alias sureBtn: testBtn property alias text: sureBtn.text Button{id: testBtnwidth: 100height: 40text: "1233" } Component.onCompleted: console.log("text="+text) 產(chǎn)生的錯(cuò)誤提示： Invalid alias reference. Unable to find id "sureBtn"2.2.5 只讀屬性
readonly property <propertyType> <propertyName> : <initialValue>只讀屬性必須在初始化的時(shí)候指定值。一旦只讀屬性被初始化了，它就不可能再被賦值了，無(wú)論是賦值(使用”=”)還是其它的方式。
2.3 信號(hào)
2.3.1 介紹
當(dāng)一個(gè)信號(hào)發(fā)射了，對(duì)象可以通過(guò)signal handler被通知。
signal <signalName>[([<type> <parameter name>[, ...]])] Item{id: rootwidth: 100height: 40MouseArea{anchors.fill: parentonClicked: console.log("Click!")} }2.3.2 命名規(guī)則
- 信號(hào)的命名規(guī)則遵循屬性的命名規(guī)則，以小駝峰的形式命名。
- 如果信號(hào)不帶參數(shù)，則一律不使用（）
- 如果信號(hào)帶參數(shù)，參數(shù)要寫(xiě)參數(shù)類(lèi)型。
信號(hào)參數(shù)的命名規(guī)則：
- msg+大駝峰形式
- 必須以“msg”開(kāi)頭，便于標(biāo)識(shí)是信號(hào)參數(shù)。
2.4 js代碼
自定義的js函數(shù)，可以帶參數(shù)，也可以不帶出參數(shù)，且參數(shù)不用指明參數(shù)類(lèi)型，因?yàn)楹瘮?shù)的參數(shù)類(lèi)型默認(rèn)是萬(wàn)能的var類(lèi)型。
函數(shù)名由字母和_組成，且首字母必須是小寫(xiě)，即以小駝峰的形式命名
函數(shù)返回時(shí)不要使用圓括號(hào)。
當(dāng)定義的js函數(shù)，僅能在本qml文件使用,即使私有函數(shù)時(shí)，此函數(shù)的命名才用到_, 且是以雙下劃線(__)開(kāi)始 + 小駝峰的方式命名
2.4 js文件
當(dāng)一個(gè)qml文件中的js代碼較多即：js函數(shù)代碼超過(guò)80行時(shí)，應(yīng)根據(jù)其分類(lèi)或應(yīng)用邏輯單獨(dú)作成一個(gè)js文件，再將js文件導(dǎo)入qml文件。
2.4.1 js文件導(dǎo)入
qml中導(dǎo)入的js文件必須要有別名，別名的命名規(guī)則：
以大駝峰的形式命名
由js文件名中除了_和impl以外的字母組成
在js文件中導(dǎo)入另一個(gè)js文件的2種方法
.import "filename_imp.js" as Filename Qt.include "filename.js"`2.5 布爾表達(dá)式
在布爾表達(dá)式中，邏輯運(yùn)算符 && 和|| 兩邊的條件表達(dá)式根據(jù)邏輯需要添加圓括號(hào)()
2.6 狀態(tài)機(jī)
- 在qml中，狀態(tài)是定義在state類(lèi)型中的一系列屬性配置，不同的配置可能有不同的作用，為了方便起見(jiàn),State元素都有一個(gè)when屬性，可以綁定表達(dá)式來(lái)改變狀態(tài)，當(dāng)綁定的表達(dá)式評(píng)估為true，狀態(tài)改變；當(dāng)表達(dá)式評(píng)估為false，狀態(tài)會(huì)退回到default state。
- 顯示一些UI控件，隱藏另一些。
啟動(dòng)、暫停、停止動(dòng)畫(huà)。
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}}] }改變某個(gè)特定Item的property的值。
StateGroup {states: [State {name: "color"when: bChangedPropertyChanges {target: rootRectcolor: "red"}},State {name: "enabled"when: disabledPropertyChanges {target: rootRectenabled: false}}] }顯示一個(gè)不同的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"}}] }在某種新的狀態(tài)下執(zhí)行某些腳本。
// 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()}}} }向用戶呈現(xiàn)不同的操作和功能
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}}}// 鼠標(biāo)事件MouseArea {anchors.fill: parentonClicked: rect.state = "reanchored"} }把指定的item換一個(gè)item父節(jié)點(diǎn)
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中每個(gè)state之間的觸發(fā)條件與PropertyChanges中的屬性之間不要有關(guān)聯(lián)，若有關(guān)聯(lián)，可能會(huì)形成死循環(huán)。
- 在qml中使用states時(shí)，一定要加上父層StateGroup，這樣可以避免與原始控件中state名相同的state相沖突，產(chǎn)生無(wú)法預(yù)料的問(wèn)題。
- 能用條件運(yùn)算符替代states的地方，盡量用條件運(yùn)算符，不要用states。條件運(yùn)算符的執(zhí)行速度比state快。
同一個(gè)State中有多個(gè)PropertyChanges，PropertyChanges的target不能設(shè)置一樣，否則只執(zhí)行第一個(gè)PropertyChanges。
StateGroup {states:State {name: "name"when: bChangedPropertyChanges {target: rootcolor: "red"}PropertyChanges {target: rootborder.color: "red"}} } 應(yīng)該修改為 StateGroup {states:State {name: "name"when: bChangedPropertyChanges {target: rootcolor: "red"border.color: "red"}} }3 內(nèi)部組件
與“根組件定義”相同，但是其屬性、信號(hào)、方法命名需添加雙下劃線("__")前綴。
Item {id: rootwidth: 800height: 480Item {id: subItemproperty bool __updateState：falsesignal __clickedfunction __doSomething(x){return x+subItem.x}width: 400height: 400}}4 視覺(jué)元素
元素可以分為視覺(jué)元素和非視覺(jué)元素。視覺(jué)元素（如Rectangle）具有幾何形狀，通常在屏幕上顯示一個(gè)區(qū)域。非視覺(jué)元素（如Timer）提供一般用于操作視覺(jué)元素的常規(guī)功能。
基本視覺(jué)元素，例如Item，Rectangle，Text，Image和MouseArea。但是，通過(guò)使用Qt Quick Controls 2模塊，可以創(chuàng)建由標(biāo)準(zhǔn)平臺(tái)組件（例如按鈕，標(biāo)簽和滑塊）構(gòu)建的用戶界面。
4.1 item元素
Item是所有視覺(jué)元素的基礎(chǔ)元素，因?yàn)樗衅渌曈X(jué)元素都繼承自Item。它本身不會(huì)繪制任何內(nèi)容，而是定義所有可視元素共有的所有屬性：
4.2 Rectangle元素
該Rectangle擴(kuò)展Item并增加了填充顏色吧。此外，它支持由border.color和定義的邊框border.width。要?jiǎng)?chuàng)建圓角矩形，可以使用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顏色名稱(chēng)中的顏色（請(qǐng)參閱 http://www.w3.org/TR/css3-color/#svg-color）。您可以以不同的方式在QML中提供顏色，但是最常見(jiàn)的方式是RGB字符串（’＃FF4444’）或作為顏色名稱(chēng)（例如’white’）。
- 矩形還支持自定義漸變
無(wú)法創(chuàng)建成角度的漸變。為此，最好使用預(yù)定義的圖像。一種可能性是僅用漸變旋轉(zhuǎn)矩形，但要注意，旋轉(zhuǎn)的矩形的幾何形狀不會(huì)改變，因此會(huì)引起混亂，因?yàn)樵氐膸缀涡螤钆c可見(jiàn)區(qū)域不同。從作者的角度來(lái)看，在這種情況下最好使用設(shè)計(jì)的漸變圖像。
4.3 Text元素
具體使用見(jiàn)QML學(xué)習(xí)(四)——<Text顯示>
要顯示文本，可以使用Text元素。它最顯著的屬性是texttype 的屬性string。元素根據(jù)給定的文本和所使用的字體計(jì)算其初始寬度和高度。字體可以使用字體屬性組的影響（例如font.family，font.pixelSize…）。要更改文本的顏色，只需使用color屬性。
可以使用horizontalAlignment和verticalAlignment屬性將文本對(duì)齊到每一邊和中心。要進(jìn)一步增強(qiáng)文本渲染效果，可以使用style和styleColor屬性，該屬性允許您以輪廓，凸起和凹陷模式渲染文本。對(duì)于較長(zhǎng)的文本，您通常希望定義一個(gè)斷點(diǎn)位置，例如A very…long text，這可以使用elide屬性來(lái)實(shí)現(xiàn)。該elide屬性允許您將滑動(dòng)位置設(shè)置為文本的左側(cè)，右側(cè)或中間。如果您不希望出現(xiàn)“省略”模式的“ …”但仍然希望看到全文，則還可以使用wrapMode屬性將文本換行（僅在顯式設(shè)置寬度時(shí)才有效）：
一個(gè)Text元素只顯示給定的文本。它不呈現(xiàn)任何背景裝飾。除了渲染的文本，該Text元素也是透明的。為文本元素提供合理的背景是整體設(shè)計(jì)的一部分。
請(qǐng)注意，Text初始寬度（高度）取決于文本字符串和字體集。甲Text沒(méi)有設(shè)定寬度和沒(méi)有文本元素將不可見(jiàn)，作為初始寬度將為0。
通常，當(dāng)您要布局Text元素時(shí)，需要區(qū)分在Text元素邊界框內(nèi)對(duì)齊文本還是在元素邊界框本身之間對(duì)齊。在前一種情況下，您想使用horizontalAlignment和verticalAlignment屬性，在后一種情況下，您想操縱元素的幾何形狀或使用錨點(diǎn)。
4.4 Image元素
一個(gè)Image元素能夠顯示各種格式的圖像（例如PNG，JPG，GIF，BMP，WEBP）。有關(guān)支持的圖像格式的完整列表，請(qǐng)查閱Qt文檔。除了source提供圖像URL 的明顯屬性外，它還包含一個(gè)fillMode控制大小調(diào)整行為的屬性。
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還應(yīng)該啟用裁剪，以避免在Image邊界外渲染圖像數(shù)據(jù)。默認(rèn)情況下，裁剪是禁用的（clip：false）。您需要啟用剪貼（clip：true）來(lái)將繪畫(huà)限制為邊界矩形的元素。可以在任何視覺(jué)元素上使用。
4.5 MouseArea元素
要與這些元素進(jìn)行交互，您通常會(huì)使用MouseArea。這是一個(gè)矩形的不可見(jiàn)項(xiàng)，您可以在其中捕獲鼠標(biāo)事件。當(dāng)用戶與可視部件交互時(shí)，鼠標(biāo)區(qū)域通常與可見(jiàn)項(xiàng)一起使用以執(zhí)行命令。
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 非視覺(jué)元素
參考
1、qml編碼規(guī)范與指導(dǎo)
2、A Book about Qt5
3、QML學(xué)習(xí)(四)——<Text顯示>
4、QML圖像、狀態(tài)和動(dòng)畫(huà)–縮放、旋轉(zhuǎn)和平移
總結(jié)
以上是生活随笔為你收集整理的Quick--组件与基本元素的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 三极管基极下拉电阻作用
- 下一篇： 应用于供氧中心的医用气体监测系统ZWAC