QML簡介
QML（Qt Meta-Object Language，Qt元對象語言），Qt推出的Qt Quick技術的一部分，是一種用于描述應用程序用戶界面的聲明式編程語言。 它使用一些可視組件以及這些組件之間的交互來描述用戶界面。QML是一種高可讀性的語言，可以使組件以動態方式進行交互，并且允許組件在用戶界面中很容易地實現復用和自定義。
QML是Qt Quick （Qt4.7.0+的新特性）核心組件之一：Qt Quick是一組旨在幫助開發者創建在手機、媒體播放器、機頂盒和其他便攜設備上使用越來越多的直觀、現代、流暢UI的工具集合。
如果學過前端開發，會發現QML的思想跟Vue.js、Angula等非常相似。語法格式非常像HTML+CSS，也支持JavaScript形式的編程控制。Qt Designer可以設計出.ui界面文件，但是不支持和Qt原生C++代碼的交互。而Qt Creator可以設計出.qml文件，QML可以和Qt原生代碼進行交互，作為MVC模型中的“View”。
國內Vue.js很普及，后續會出一個完整的QML與Vue的功能對照表，如：生命周期、Component、信號與Slot、計算屬性、Transition動畫、Repeater/V-for等。
MVC開發框架
MVC模式（Model–view–controller）是軟件工程中的一種軟件架構模式，把軟件系統分為三個基本部分：模型（Model）、視圖（View）和控制器（Controller）。
MVC模式最早由Trygve Reenskaug在1978年提出，是施樂帕羅奧多研究中心（Xerox PARC）在20世紀80年代為程序語言Smalltalk發明的一種軟件架構。MVC模式的目的是實現一種動態的程式設計，使后續對程序的修改和擴展簡化，并且使程序某一部分的重復利用成為可能。除此之外，此模式透過對復雜度的簡化，使程序結構更加直觀及容易擴展和維護。軟件系統透過對自身基本部分分離的同時也賦予了各個基本部分應有的功能。專業人員可以依據自身的專長分組：
- 模型（Model） - 程序員編寫程序應有的功能（實現算法等等）、數據庫專家進行數據管理和數據庫設計(可以實現具體的功能)。
- 視圖（View） - 界面設計人員進行圖形界面設計。
- 控制器（Controller）- 負責轉發請求，對請求進行處理。
在Qt開發中，QML就是作為View（+部分簡單的Model）模塊。而Python/C++則實現Controller+Model功能。
QML開發環境
在安裝完Python(> 3.6)、PySide6之后，其實就可以直接開發簡單的app了。
pip install pyside6
當然，有可視化開發環境會事半功倍，界面開發可使用Qt Creator（注意跟Qt Designer不同，Designer只能設計.ui文件），Python調試則使用PyCharm。
Qt Creator有社區版本，Windows下安裝步驟：
下載Qt在線安裝程序: qt official_releases/online_installers (qt.io)
注冊一個Qt賬號
運行qt-unified-windows-x86-4.3.0-1-online.exe
選擇自定義安裝Custom installation
- 組件選擇：（這里選擇錯了也沒關系，安裝后可以在程序里找“Qt Maintenance Tool”重新增減組件）
- Qt 6.3.0 MinGW，用于直接調試C++和 .qml文件
- 如果你用MS VS的話，可選擇MSVC 2019
-
Qt Creator 7.0.2和相應debug模塊
image.png
耐心等待安裝完成，大概下載700MB，安裝后占用約4GB空間。
在開始菜單里找到Qt Creator，運行：
注意：Qt現在推廣Qt Design Studio，所以把Qt Creator里可視化編輯QML的工具給隱藏了，要自行打開：菜單Help --> About Plugins... --> 勾選Designer，重啟程序。
第一個Py QML程序
Qt Creator: File --> New Project...
- 這里有很多模板，第一種“Application (Qt)”，適合C++開發。第二種"Application (Qt for Python)"就是適合Python(PySide6/PyQt)開發的。
- 第二列，選擇“Qt Quick Application"，使用QML開發，點下一步
- 選擇最新的PySide6，點完成
會自動按模板創建3個文件：
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_())
這個Python主程序非常簡潔：
- 引用PySide6。如果是使用PyQt，則直接修改為PyQt6就行
- 創建Qt主程序：
app = QGuiApplication(sys.argv) - 創建解析QML的引擎：
engine = QQmlApplicationEngine() - engine加載QML文件：
engine.load("main.qml") - app就可以直接運行了
main.qml
import QtQuick
import QtQuick.Window
Window {
width: 640
height: 480
visible: true
title: qsTr("Hello World")
}
這個QML主界面，內容也非常一目了然：
- 創建一個Window組件
- 設置它的屬性：width, height, visible, title。相比.ui文件，是不是簡潔方便多了？
- 用鼠標點擊.qml里字段，如
Window，按"F1"，可以直接查詢對應的幫助文檔
如何運行
左邊一列工具欄里，先點擊“Project"，選擇Python解釋器（注意確保PySide6已安裝）
點工具欄左下角綠色運行鍵，第一個Py QML程序就順利運行了：
- 注意Applicationi Output里，可以查看調試信息
如果是復雜的Python程序，可以在PyCharm中打開這個目錄，方便調試 .py文件。
點工具欄"Edit"，可以編輯源文件，雙擊“main.qml“，這時工具欄 "Design" 就變亮了。
點工具欄"Design"，右上角可選顯示方式，一般使用"Essentials" 或 "UX-Design"。
可視化編輯UI (.qml文件)
左邊"Components"點 "+"，添加"QtQuick.Controls，Layouts"等顯示到常用組件
我們來隨便試試吧：
拖一個"Text"、一個"Button"組件到中間"Form Editor"，app主界面上。右邊的"Text Editor"上會自動更新.qml文件。同理，你在外部改動 .qml文件后，預覽也會自動更新。語法跟CSS類似。
給"Button"添加一個onClicked事件，可以看到就是JavaScript語法，實際上，你可以在QML文件里直接寫任意js代碼并調用。當然，Controller控制功能還是建議與View分開。
保存.qml，再次運行，可以看到界面已經能響應Button點擊了，同時console.log信息也輸出“Application Output”了。
是不是有回到Vue.js寫前端的熟悉感覺了哈？
小貼士：
QML程序在PyCharm里調試，看不到console.log輸出怎么辦？
- Pycharm打開app目錄
- 運行main.py
- 右上角點箭頭：Edit Configurations...
- Execution: 勾選Emulate terminal in output console
- 這樣，python輸出和QML輸出的信息就能同時看到了：
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篇的天氣預報程序，涉及信號、動畫
