基礎(chǔ)語法

?QML是一種用于描述對象如何相互關(guān)聯(lián)的聲明式語言。
?QtQuick是一個基于QML的框架。

例子

import QtQuick
import QtQuick.WindowRectangle {id:rootwidth: 220;height: 260color:"#4A4A4A"Image {id: imagex:(parent.width-width)/2; y:20source: "../../images/pinwheel.png"}Text {y:image.height+image.y+20text: "大風(fēng)車"color:"white"horizontalAlignment: Text.AlignHCenterwidth: parent.width}
}

注解
1、import語句導(dǎo)入一個模塊。qt6可以不寫版本號，自動加載最高版本的模塊。
2、對于單行注釋，可以使用//，對于多行注釋，可以通過/* */進(jìn)行注釋。就像在C/C++和JavaScript中一樣。
3、每個QML文件都需要有一個唯一的根元素，就像HTML一樣。
4、元素聲明形式為：type{ }。
5、元素可以有屬性，形式為:name:value。
6、QML文檔中的任意元素可以通過使用其id（不帶引號的標(biāo)識符）進(jìn)行訪問。
7、元素可以嵌套，這意味著父元素可以有子元素。子元素可以使用parent關(guān)鍵字訪問父元素。

屬性

?屬性是一個簡單的鍵值對，例如：width: 100; text: 'Greetings’ ; color: ‘#FF0000’ 。
?屬性具有類型，并且可以具有初始值。

例子

    import QtQuickimport QtQuick.Window
Rectangle
{width:300;height:300;Text{// (1) identifierid: thisLabel// (2) set x- and y-positionx: 24; y: 16// (3) bind height to 2 * widthheight: 2 * width// (4) custom propertyproperty int times: 24// (5) property aliasproperty alias anotherTimes: thisLabel.times// (6) set text appended by valuetext: "thisLable " + anotherTimes// (7) font is a grouped propertyfont.family: "Ubuntu"font.pixelSize: 24// (8) KeyNavigation is an attached propertyKeyNavigation.tab: thatLabel// (9) signal handler for property changesonHeightChanged: console.log('height:', height)// focus is need to receive key eventsfocus: false// change color based on focus valuecolor: focus ? "red" : "black"}Text {id: thatLabeltext: "thatLabel " + thisLabel.timesKeyNavigation.tab: thisLabel// focus is need to receive key eventsfocus: !thisLabel.focus// (1) handler for text changes. Need to use function to capture parametersonTextChanged: (text)=>/*function(text)*/ { console.log("text changed to:", text) }// change color based on focus valuecolor: focus ? "red" : "black"Keys.onSpacePressed: {increment()}Keys.onEscapePressed: {text = ''}//JS函數(shù)function increment(){thisLabel.times+=1}}
}

點擊tab鍵可以切換焦點。
按下空格鍵可以遞增times變量。
注解
1、id是用于引用QML文件（在QML中稱為“document”）中的元素。id在文檔中必須是唯一的，不能重置為其他值。（類似于C++的引用。）
2、屬性可以設(shè)置值，具體取決于其類型。如果沒有為屬性指定值，將使用默認(rèn)初始值。
3、屬性可以依賴于一個或多個其他屬性。這稱為綁定。
4、可以使用property限定符向元素添加新屬性，后跟類型、名稱和可選的初始值（property＜類型＞＜名稱＞：＜值＞）。
5、聲明屬性的另一種重要方式是使用別名關(guān)鍵字（property alias＜名稱＞：＜引用＞）。
6、基于int的值將自動轉(zhuǎn)換為字符串類型。每次次times屬性更改時都會更新文本。
7、編寫grouped property的另一種方法是font{family:“Ubuntu”; pixelSize:24}。
8、快速切換焦點。
9、可以為屬性提供處理程序。屬性更改后被調(diào)用。

核心元素

元素

元素可以分為視覺元素和非視覺元素。

• 視覺元素（如Rectangle）具有幾何形狀，
• 非視覺元素（Timer）提供一般功能，通常用于控制視覺元素。

item

?Item是所有視覺元素的基礎(chǔ)元素，因此所有其他視覺元素都從Item繼承。它本身并不繪制任何東西，但定義了所有視覺元素的共同屬性：
幾何屬性（Geometry）：

• x、y：用于定義元素展開的左上角位置
• z：用于定義堆疊順序。
• width、 height：用于表示范圍
  布局處理：
• anchors：（左、右、上、下、垂直和水平中心）相對于其他元素進(jìn)行定位。
• 可選項margins
• 鍵處理
• Key和KeyNavigation屬性用于控制鍵處理
• focus屬性用啟用鍵處理。
  變換
• scale和rotate變換以及x、y、z變換的通用transform屬性列表，以及transformOrigin。
  視覺
• opacity用于控制透明度，visible用于顯示/隱藏元素，clip用于限制對元素邊界的繪制操作，smooth用于增強(qiáng)渲染質(zhì)量。
  狀態(tài)定義
• states用于動畫化狀態(tài)更改。
• 包含所有支持的狀態(tài)列表、當(dāng)前state屬性和transitions列表屬性。

Rectangle

?Rectangle擴(kuò)展了Item，為其添加填充顏色。此外，還支持border.color和border.width。要創(chuàng)建圓角矩形，可以使用radius屬性。

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

除了填充顏色和邊框，矩形還支持自定義漸變：

Rectangle { id: rect3x: 212; y: 12 width: 76; height: 96 gradient: Gradient { GradientStop { position: 0.0; color: "lightsteelblue" } GradientStop { position: 1.0; color: "slategray" } } border.color: "slategray" 
} 

Text

?要顯示文本，可以使用Text元素。它最顯著的屬性是字符串類型的text屬性。元素根據(jù)給定的文本和使用的字體（例如font.family、font.pixelSize等）計算其初始寬度和高度。要更改文本的顏色，只需使用color屬性。

例子

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

• 可以使用horizontalAlignment和verticalAlignment屬性對齊文本。使用style和styleColor屬性，允許以輪廓、凸起和凹陷模式渲染文本。
• elide屬性允許將省略符位置設(shè)置為文本的左側(cè)、右側(cè)或中間。
• 如果不希望省略符模式的“…”出現(xiàn)，但仍希望看到全文，可以使用wrapMode屬性包裝文本（僅在顯式的設(shè)置了寬度時有效)。

Image

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

例子

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

MouseArea

?MouseArea這是一個矩形的不可見項，可以在其中捕獲鼠標(biāo)事件。

例子

Rectangle { id: rect1 x: 12; y: 12 width: 76; height: 96 color: "lightsteelblue" MouseArea { id: area width: parent.width height: parent.height onClicked: rect2.visible = !rect2.visible 
} Rectangle { id: rect2 x: 112; y: 12 width: 76; height: 96 border.color: "lightsteelblue" border.width: 4 radius: 8 
} 

Component（組件）

?組件是可重用的元素。QML提供了創(chuàng)建組件的不同方法。目前，最簡單的形式是基于文件的組件：
?在文件中放置QML元素并為該文件提供元素名（例如Button.qml）來創(chuàng)建的。然后就可以像Qt Quick模塊中的其他元素一樣使用該組件。

例子

Button.qml

import QtQuickItem {id:rootproperty alias text:label.textsignal clickedRectangle {// our inlined button uiid: buttonx: 12; y: 12width: 116; height: 26color: "lightsteelblue"border.color: "slategrey"Text {id:labelanchors.centerIn: parenttext: "Start"}MouseArea {anchors.fill: parentonClicked: {root.clicked()}}}
}

import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")Button{text:"開始"onClicked: {text1.text="按鈕被點擊"}}Text { // text changes when button was clickedid: text1x: 12;y: 76width: 116;height: 26text: "waiting ..."horizontalAlignment: Text.AlignHCenter}}

簡單變換

包括平移、旋轉(zhuǎn)和縮放操作。

• 平移：通過改變x、y位置完成簡單的平移。
• 旋轉(zhuǎn)：值以度（0-360）表示。
• 縮放：大于1表示放大，小于1表示縮小。
  在展示示例之前，介紹一個小助手：ClickableImage元素。一個帶有鼠標(biāo)區(qū)域的圖像。

例子

ClickableImage.qml

import QtQuickImage {id: rootsignal clickedMouseArea {anchors.fill: parentonClicked: root.clicked()}
}

import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")MouseArea{anchors.fill: parentonClicked:{qq1.x = 50;qq2.rotation = 0;qq3.rotation = 0;qq3.scale = 1.0;}}ClickableImage{x:50;y:68;id:qq1source: "../../images/qq.png"onClicked:{x+=10;}}ClickableImage{x:150;y:68;id:qq2source: "../../images/qq.png"onClicked:{rotation+=10;}}ClickableImage{x:250;y:68;id:qq3source: "../../images/qq.png"onClicked:{rotation+=10;scale+=0.1;}}
}

定位器

?QML中有許多用于定位的元素。這些稱為定位器，其中Qt Quick模塊提供以下功能：Row、Column、Grid和Flow。

// RedSquare.qml import QtQuick Rectangle { 
width: 48 
height: 48 
color: "#ea7025" 
border.color: Qt.lighter(color) 
} 

Column

// ColumnExample.qml import QtQuick DarkSquare { id: root width: 120 height: 240 Column { id: column anchors.centerIn: parent spacing: 8 RedSquare { } GreenSquare { width: 96 } BlueSquare { } 
} 
} 

Row

?Row元素將其子項彼此相鄰放置，從左到右或從右到左，具體取決于layoutDirection屬性。同樣，spacing用于分隔子項。

import QtQuick BrightSquare { id: root width: 400; height: 120 Row { id: row anchors.centerIn: parent spacing: 20 BlueSquare { } GreenSquare { } RedSquare { } 
} 
} 

Grid

?Grid元素在網(wǎng)格中排列其子元素。通過設(shè)置rows和columns屬性，可以約束行或列的數(shù)量。屬性flow和layoutDirection用于控制項添加到網(wǎng)格的順序，而spacing控制分隔子項的空間量。

import QtQuick BrightSquare { id: root width: 160 height: 160 Grid { id: grid rows: 2 columns: 2 anchors.centerIn: parent spacing: 8 RedSquare { } RedSquare { } RedSquare { } RedSquare { } } 
} 

Flow

import QtQuickBrightSquare { id: root width: 160 height: 160 Flow { anchors.fill: parent anchors.margins: 20 spacing: 20 RedSquare { } BlueSquare { } GreenSquare { } } 
} 

Repeater

import QtQuick 
DarkSquare{id:rootwidth: 252;height: 252property var colorArray:["#00bde3", "#67c111", "#ea7025"]Grid{//columns默認(rèn)值為4anchors.centerIn: parentanchors.margins: 8spacing: 4Repeater{model:16Rectangle{id:rectproperty int colorIndex: Math.floor(Math.random()*3)color: root.colorArray[colorIndex]width: 56; height:56Text {anchors.centerIn: parenttext:"Cell"+/*parent.index*/rect.Positioner.indexcolor:'white'}}}}
} 

布局

QML可以用錨來布局項目。錨定的概念是Item的基礎(chǔ)，可用于所有可視化QML元素。

• 文本元素除了top、bottom、left、right、horizontalCenter、verticalCenter錨外，還有baseline錨
• 每個錨都有一個偏移。對于top、bottom、left、right錨，它們稱為邊距。對于horizontalCenter、verticalCenter和baseline，它們稱為偏移。
  

import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")GreenSquare {//        BlueSquare {//            anchors.fill: parent//            anchors.margins: 8//            text: '(1)'//        }//        BlueSquare{//            text: '(2)'//            anchors.left: parent.left//            y:8//            anchors.margins: 8//        }//        BlueSquare{//            text: '(3)'//            anchors.left: parent.right//        }//        BlueSquare{//            id:blue1//            text: '(4-1)'//            y:8//            anchors.horizontalCenter: parent.horizontalCenter//            anchors.margins: 8//            height:25//        }//        BlueSquare{//            text: '(4-2)'//            anchors.top: blue1.bottom//            anchors.horizontalCenter: parent.horizontalCenter//            anchors.margins: 8//            height:25//            width:75//        }//        BlueSquare{
//            text: '(5)'
//            anchors.centerIn: parent
//        }BlueSquare{text: '(6)'anchors.horizontalCenter: parent.horizontalCenteranchors.horizontalCenterOffset: -12anchors.verticalCenter: parent.verticalCenter}}}

Input

• 允許用戶輸入一行文本。元素支持輸入約束，如validator、inputMask、echoMode。
• 可以在文本輸入中單擊以更改焦點。使用KeyNavigation屬性可以通過鍵盤更改焦點。
  TLineEditV1.qml

FocusScope{width: 200;height:50Rectangle{anchors.fill: parentcolor:'lightsteelblue'border.color: "gray"}property alias text: input.textproperty alias input: inputTextInput{id:inputanchors.fill: parentanchors.margins: 2focus:true//wrapMode:Text.WordWrap}
}

?使用tab鍵進(jìn)行導(dǎo)航。焦點不會更改為input2。僅使用focus:true是不夠的。問題是，當(dāng)焦點轉(zhuǎn)移到input2元素時，TlineEditV1內(nèi)的頂級項接收到焦點，并且沒有將焦點轉(zhuǎn)發(fā)到TextInput。為了防止這種情況，QML提供了FocusScope。

import QtQuick
import QtQuick.WindowWindow {width: 640height: 480visible: truetitle: qsTr("Hello World")//    Rectangle{
//        width:200;height:80;
//        color: "linen"
//        TextInput {
//            id: input1
//            x: 8; y: 8
//            width: 96; height: 20
//            focus: true
//            text: "Text Input 1"
//            KeyNavigation.tab: input2
//        }//        TextInput {
//            id: input2
//            x: 8; y: 36
//            width: 96; height: 20
//            text: "Text Input 2"
//            KeyNavigation.tab: input1
//        }//    }TLineEditV1{id:input1text: "Text input 1"input.font.pixelSize: 16height: input.font.pixelSize+10input.color: 'white'focus:trueKeyNavigation.tab: input2}TLineEditV1{id:input2text: "Text input 2"input.font.pixelSize: 16y:input1.y+input1.height+12height: input.font.pixelSize+10input.color: 'white'KeyNavigation.tab: input1}
}

Keys

?允許基于某些按鍵執(zhí)行代碼。例如，要移動和縮放一個正方形，我們可以使用上、下、左和右鍵來平移元素，使用加號和減號鍵來縮放元素。

import QtQuick
import QtQuick.WindowRectangle {width: 400; height: 200Rectangle{id:squarewidth: 100;height:100color:'green'border.color: Qt.lighter(color)}focus: trueKeys.onLeftPressed: square.x -= 8Keys.onRightPressed: square.x += 8Keys.onUpPressed: square.y -= 8Keys.onDownPressed: square.y += 8Keys.onPressed: function(event){switch(event.key){case Qt.Key_Plus:square.scale+=0.2;break;case Qt.Key_Minus:square.scale-=0.2;break;}}
}

完整代碼鏈接