大家好父虑，我是老吳。
今天用幾個(gè)小例子帶大家快速入門 QML 編程授药。
0. 什么是 QML士嚎？
QML 是一種用于描述應(yīng)用程序用戶界面的聲明式編程語言，Qt Quick 則是 QML 應(yīng)用的標(biāo)準(zhǔn)庫悔叽。
我為什么選擇學(xué)習(xí) QML莱衩？
易上手;
可讀性高;
學(xué)習(xí)資料多，有各種文檔和示例;
跨平臺(tái);
性能不差骄蝇，流暢度還行膳殷。
1. 如何創(chuàng)建 QML 應(yīng)用？
舉個(gè)栗子：
在 Qt Creator 依次點(diǎn)擊：
-> File -> New File or Project
-> Applications -> Qt Quick Application
然后一路點(diǎn)擊 next 直到 finish 九火。
修改 main.qml ：
//?文件?main.qml
import?QtQuick?2.12
import?QtQuick.Window?2.12
Window?{
????visible:?true
????width:?320
????height:?240
????title:?qsTr("Hello?World")
????Rectangle?{
????????width:?320
????????height:?240
????????color:?"green"
????????Text?{
????????????anchors.centerIn:?parent
????????????text:?"Hello,?World!"
????????}
????}
}
這樣就完成了你的第一個(gè) QML 程序赚窃，它的作用是在一個(gè)綠色的長(zhǎng)方形塊上顯示 "Hello World!"。
運(yùn)行效果：
這里的 Window岔激、Rectangle勒极、Text 都是 QML 里的類型，術(shù)語 為 QML Type虑鼎。
進(jìn)一步了解 QML Type：
The QML Type System
QML Basic Types
QML Object Types
２. 使用 Qt Quick Controls
什么是 Qt Quick Controls辱匿？
Qt Quick Controls 就是一組控件，用于在 Qt Quick 中構(gòu)建完整的界面炫彩。
舉個(gè)例子：
//?文件?main.qml
import?QtQuick?2.12
import?QtQuick.Controls?2.12
ApplicationWindow?{
????visible:?true
????title:?qsTr("Hello?World")
????width:?320
????height:?240
????menuBar:?MenuBar?{
????????Menu?{
????????????title:?qsTr("File")
????????????MenuItem?{
????????????????text:?qsTr("&Open")
????????????????onTriggered:?console.log("Open?action?triggered");
????????????}
????????????MenuItem?{
????????????????text:?qsTr("Exit")
????????????????onTriggered:?Qt.quit();
????????????}
????????}
????}
????Button?{
????????text:?qsTr("Hello?World")
????????anchors.horizontalCenter:?parent.horizontalCenter
????????anchors.verticalCenter:?parent.verticalCenter
????}
}這里的 ApplicationWindow 匾七、MenuBar、Button 首先是 QML Type江兢，并且它們是 Qt Quick Controls 里提供的控件昨忆。
-
ApplicationWindow 是一個(gè)通用的窗口控件;
-
MenuBar 是一個(gè)菜單欄控件;
-
Button 是按鍵控件;
運(yùn)行效果：
進(jìn)一步了解 Qt Quick Controls：
Qt Quick Layouts - Basic Example
Qt Quick Controls - Gallery
3. 處理用戶輸入
使用 QML 設(shè)計(jì)界面的一大優(yōu)點(diǎn)是，
它允許設(shè)計(jì)人員使用簡(jiǎn)單的 JavaScript 表達(dá)式定義應(yīng)用程序?qū)κ录姆磻?yīng)杉允。
在 QML 中邑贴，我們將事件稱為信號(hào)，并且這些信號(hào)由信號(hào)處理程序處理叔磷。
舉個(gè)例子：
//?文件?main.qml
ApplicationWindow?{
????...
????Rectangle?{
????????width:?100
????????height:?100
????????color:?"red"
????????anchors.verticalCenter:?parent.verticalCenter
????????Text?{
????????????anchors.centerIn:?parent
????????????text:?"Hello,?World!"
????????}
????????TapHandler?{
????????????onTapped:?parent.color?=?"green"
????????}
????}
}
運(yùn)行效果：
TapHandler 用于響應(yīng)觸摸屏或者鼠標(biāo)的點(diǎn)擊拢驾，這里我們使用它來處理對(duì)綠色方塊的點(diǎn)擊事件。
進(jìn)一步了事件處理：
Signal and Handler Event System
4. 屬性綁定
什么是屬性綁定改基？
對(duì)象及其屬性構(gòu)成了 QML 文件中定義的圖形界面的基礎(chǔ)繁疤。
QML 允許屬性彼此之間以各種方式綁定，從而實(shí)現(xiàn)高度動(dòng)態(tài)的用戶界面。
舉個(gè)例子：
//?文件?main.qml
ApplicationWindow?{
????Rectangle?{
????????width:?100
????????height:?100
????????color:?"red"
????????Rectangle?{
????????????width:?parent.width?/?2
????????????height:?parent.height?/?2
????????????color:?"green"
????????}
????}
}運(yùn)行效果：
子矩形的長(zhǎng)寬綁定了到父矩形的幾何形狀嵌洼。
如果父矩形的長(zhǎng)寬發(fā)生變化案疲，則由于屬性綁定，子矩形的長(zhǎng)寬將自動(dòng)更新麻养。
5. 自定義 QML Type
每個(gè) QML 文件都隱式地定義了一個(gè) QML type，這個(gè) QML type 可以在其他 QML 文件中重復(fù)使用诺舔。
舉個(gè)例子：
新建一個(gè) QML 文件 MessageLabel.qml：
//?文件?MessageLabel.qml
import?QtQuick?2.12
Rectangle?{
????height:?50
????property?string?message:?"debug?message"
????property?var?msgType:?["debug",?"warning"?,?"critical"]
????color:?"black"
????Column?{
????????anchors.fill:?parent
????????padding:?5.0
????????spacing:?2
????????Text?{
????????????text:?msgType.toString().toUpperCase()?+?":"
????????????font.bold:?msgType?==?"critical"
????????????font.family:?"Terminal?Regular"
????????????color:?msgType?===?"warning"?||?msgType?===?"critical"???"red"?:?"yellow"
????????????ColorAnimation?on?color?{
????????????????running:?msgType?==?"critical"
????????????????from:?"red"
????????????????to:?"black"
????????????????duration:?1000
????????????????loops:?msgType?==?"critical"???Animation.Infinite?:?1
????????????}
????????}
????????Text?{
????????????text:?message
????????????color:?msgType?===?"warning"?||?msgType?===?"critical"???"red"?:?"yellow"
????????????font.family:?"Terminal?Regular"
????????}
????}
}這里可以理解為我們創(chuàng)建了一個(gè)名為 MessageLabel 的控件鳖昌。
引用 MessageLabel：
//?文件?main.qml
Window?{
????...
????
????Column?{
????????...
????????MessageLabel{
????????????width:?parent.width?-?2
????????????msgType:?"debug"
????????}
????????MessageLabel?{
????????????width:?parent.width?-?2
????????????message:?"This?is?a?warning!"
????????????msgType:?"warning"
????????}
????????MessageLabel?{
????????????width:?parent.width?-?2
????????????message:?"A?critical?warning!"
????????????msgType:?"critical"
????????}
????}
}運(yùn)行效果：
我們很方便地就構(gòu)造了一個(gè)名為 MessageLabel 的控件，用于實(shí)現(xiàn)不同等級(jí)的 log 打印低飒。
到這里许昨，相信你已經(jīng)進(jìn)入了 QML 編程的世界了，請(qǐng)開始你自己的探索之旅吧褥赊。
—— The End ——
推薦閱讀：
想進(jìn)交流群糕档？
后臺(tái)回復(fù)【加群】，我拉你進(jìn)群拌喉。
