QML簡介
QML（Qt Meta-Object Language羹膳，Qt元對(duì)象語言），Qt推出的Qt Quick技術(shù)的一部分步咪，是一種用于描述應(yīng)用程序用戶界面的聲明式編程語言。 它使用一些可視組件以及這些組件之間的交互來描述用戶界面扁凛。QML是一種高可讀性的語言躺屁，可以使組件以動(dòng)態(tài)方式進(jìn)行交互树姨，并且允許組件在用戶界面中很容易地實(shí)現(xiàn)復(fù)用和自定義。
QML是Qt Quick （Qt4.7.0+的新特性）核心組件之一：Qt Quick是一組旨在幫助開發(fā)者創(chuàng)建在手機(jī)闺兢、媒體播放器茂缚、機(jī)頂盒和其他便攜設(shè)備上使用越來越多的直觀、現(xiàn)代屋谭、流暢UI的工具集合脚囊。
如果學(xué)過前端開發(fā)，會(huì)發(fā)現(xiàn)QML的思想跟Vue.js桐磁、Angula等非常相似悔耘。語法格式非常像HTML+CSS，也支持JavaScript形式的編程控制我擂。Qt Designer可以設(shè)計(jì)出.ui界面文件衬以，但是不支持和Qt原生C++代碼的交互。而Qt Creator可以設(shè)計(jì)出.qml文件校摩，QML可以和Qt原生代碼進(jìn)行交互看峻，作為MVC模型中的“View”。
國內(nèi)Vue.js很普及衙吩，后續(xù)會(huì)出一個(gè)完整的QML與Vue的功能對(duì)照表互妓，如：生命周期、Component、信號(hào)與Slot车猬、計(jì)算屬性、Transition動(dòng)畫尺锚、Repeater/V-for等珠闰。
MVC開發(fā)框架
MVC模式（Model–view–controller）是軟件工程中的一種軟件架構(gòu)模式，把軟件系統(tǒng)分為三個(gè)基本部分：模型（Model）瘫辩、視圖（View）和控制器（Controller）伏嗜。
MVC模式最早由Trygve Reenskaug在1978年提出，是施樂帕羅奧多研究中心（Xerox PARC）在20世紀(jì)80年代為程序語言Smalltalk發(fā)明的一種軟件架構(gòu)伐厌。MVC模式的目的是實(shí)現(xiàn)一種動(dòng)態(tài)的程式設(shè)計(jì)承绸，使后續(xù)對(duì)程序的修改和擴(kuò)展簡化，并且使程序某一部分的重復(fù)利用成為可能挣轨。除此之外军熏，此模式透過對(duì)復(fù)雜度的簡化，使程序結(jié)構(gòu)更加直觀及容易擴(kuò)展和維護(hù)卷扮。軟件系統(tǒng)透過對(duì)自身基本部分分離的同時(shí)也賦予了各個(gè)基本部分應(yīng)有的功能荡澎。專業(yè)人員可以依據(jù)自身的專長分組：
- 模型（Model） - 程序員編寫程序應(yīng)有的功能（實(shí)現(xiàn)算法等等）、數(shù)據(jù)庫專家進(jìn)行數(shù)據(jù)管理和數(shù)據(jù)庫設(shè)計(jì)(可以實(shí)現(xiàn)具體的功能)晤锹。
- 視圖（View） - 界面設(shè)計(jì)人員進(jìn)行圖形界面設(shè)計(jì)摩幔。
- 控制器（Controller）- 負(fù)責(zé)轉(zhuǎn)發(fā)請(qǐng)求，對(duì)請(qǐng)求進(jìn)行處理鞭铆。
在Qt開發(fā)中或衡，QML就是作為View（+部分簡單的Model）模塊。而Python/C++則實(shí)現(xiàn)Controller+Model功能车遂。
QML開發(fā)環(huán)境
在安裝完P(guān)ython(> 3.6)封断、PySide6之后，其實(shí)就可以直接開發(fā)簡單的app了艰额。
pip install pyside6
當(dāng)然澄港，有可視化開發(fā)環(huán)境會(huì)事半功倍，界面開發(fā)可使用Qt Creator（注意跟Qt Designer不同柄沮，Designer只能設(shè)計(jì).ui文件）回梧，Python調(diào)試則使用PyCharm。
Qt Creator有社區(qū)版本祖搓，Windows下安裝步驟：
下載Qt在線安裝程序: qt official_releases/online_installers (qt.io)
注冊(cè)一個(gè)Qt賬號(hào)
運(yùn)行qt-unified-windows-x86-4.3.0-1-online.exe
選擇自定義安裝Custom installation
- 組件選擇：（這里選擇錯(cuò)了也沒關(guān)系狱意，安裝后可以在程序里找“Qt Maintenance Tool”重新增減組件）
- Qt 6.3.0 MinGW，用于直接調(diào)試C++和 .qml文件
- 如果你用MS VS的話拯欧，可選擇MSVC 2019
-
Qt Creator 7.0.2和相應(yīng)debug模塊
image.png
耐心等待安裝完成详囤，大概下載700MB，安裝后占用約4GB空間。
在開始菜單里找到Qt Creator藏姐，運(yùn)行：
注意：Qt現(xiàn)在推廣Qt Design Studio隆箩，所以把Qt Creator里可視化編輯QML的工具給隱藏了，要自行打開：菜單Help --> About Plugins... --> 勾選Designer羔杨，重啟程序捌臊。
第一個(gè)Py QML程序
Qt Creator: File --> New Project...
- 這里有很多模板，第一種“Application (Qt)”兜材，適合C++開發(fā)理澎。第二種"Application (Qt for Python)"就是適合Python(PySide6/PyQt)開發(fā)的。
- 第二列曙寡，選擇“Qt Quick Application"糠爬，使用QML開發(fā)，點(diǎn)下一步
- 選擇最新的PySide6举庶，點(diǎn)完成
會(huì)自動(dòng)按模板創(chuàng)建3個(gè)文件：
pyqml.pyproject
{
"files": ["main.py", "main.qml"]
}
main.py
import os
from pathlib import Path
import sys
from PySide6.QtGui import QGuiApplication
from PySide6.QtQml import QQmlApplicationEngine
if __name__ == "__main__":
app = QGuiApplication(sys.argv)
engine = QQmlApplicationEngine()
engine.load(os.fspath(Path(__file__).resolve().parent / "main.qml"))
if not engine.rootObjects():
sys.exit(-1)
sys.exit(app.exec_())
這個(gè)Python主程序非常簡潔：
- 引用PySide6执隧。如果是使用PyQt，則直接修改為PyQt6就行
- 創(chuàng)建Qt主程序：
app = QGuiApplication(sys.argv) - 創(chuàng)建解析QML的引擎：
engine = QQmlApplicationEngine() - engine加載QML文件：
engine.load("main.qml") - app就可以直接運(yùn)行了
main.qml
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
}
這個(gè)QML主界面灯变，內(nèi)容也非常一目了然：
- 創(chuàng)建一個(gè)Window組件
- 設(shè)置它的屬性：width, height, visible, title殴玛。相比.ui文件，是不是簡潔方便多了添祸？
- 用鼠標(biāo)點(diǎn)擊.qml里字段滚粟，如
Window，按"F1"刃泌，可以直接查詢對(duì)應(yīng)的幫助文檔
如何運(yùn)行
左邊一列工具欄里凡壤，先點(diǎn)擊“Project"，選擇Python解釋器（注意確保PySide6已安裝）
點(diǎn)工具欄左下角綠色運(yùn)行鍵耙替，第一個(gè)Py QML程序就順利運(yùn)行了：
- 注意Applicationi Output里亚侠，可以查看調(diào)試信息
如果是復(fù)雜的Python程序，可以在PyCharm中打開這個(gè)目錄俗扇，方便調(diào)試 .py文件硝烂。
點(diǎn)工具欄"Edit"，可以編輯源文件铜幽，雙擊“main.qml“滞谢，這時(shí)工具欄 "Design" 就變亮了。
點(diǎn)工具欄"Design"除抛，右上角可選顯示方式狮杨，一般使用"Essentials" 或 "UX-Design"。
可視化編輯UI (.qml文件)
左邊"Components"點(diǎn) "+"到忽，添加"QtQuick.Controls橄教，Layouts"等顯示到常用組件
我們來隨便試試吧：
拖一個(gè)"Text"、一個(gè)"Button"組件到中間"Form Editor"，app主界面上护蝶。右邊的"Text Editor"上會(huì)自動(dòng)更新.qml文件华烟。同理，你在外部改動(dòng) .qml文件后持灰，預(yù)覽也會(huì)自動(dòng)更新垦江。語法跟CSS類似。
給"Button"添加一個(gè)onClicked事件搅方，可以看到就是JavaScript語法，實(shí)際上绽族，你可以在QML文件里直接寫任意js代碼并調(diào)用姨涡。當(dāng)然，Controller控制功能還是建議與View分開吧慢。
保存.qml涛漂，再次運(yùn)行，可以看到界面已經(jīng)能響應(yīng)Button點(diǎn)擊了检诗，同時(shí)console.log信息也輸出“Application Output”了匈仗。
是不是有回到Vue.js寫前端的熟悉感覺了哈？
小貼士：
QML程序在PyCharm里調(diào)試逢慌，看不到console.log輸出怎么辦悠轩？
- Pycharm打開app目錄
- 運(yùn)行main.py
- 右上角點(diǎn)箭頭：Edit Configurations...
- Execution: 勾選Emulate terminal in output console
- 這樣，python輸出和QML輸出的信息就能同時(shí)看到了：
C:\Users\kevinqq\AppData\Local\Programs\Python\Python38\python.exe C:/Users/kevinqq/git/qtProject/pyqml/main.py
<PySide6.QtGui.QWindow(0x22fe7329) at 0x0000022F>
qml: button clicked
qml: button clicked
Process finished with exit code 0
下一篇攻泼，使用QML來改寫第2篇的天氣預(yù)報(bào)程序火架，涉及信號(hào)、動(dòng)畫
