QML概述
QML（Qt Meta-Object Language）是一種聲明性語言，它被用于描述Qt框架中用戶界面的結構和行為。QML提供了一種簡潔、靈活的方式來創建動態和交互式的界面。
QML基于JavaScript語法，通過使用QML類型和屬性來定義界面的元素和行為。它支持嵌套和組合，使開發人員可以輕松地創建復雜的界面和動畫效果。
與傳統的基于代碼的GUI開發相比，使用QML可以更快速地構建用戶界面，因為它提供了豐富的可重用組件和內置的動畫和過渡效果。此外，QML還支持跨平臺開發，使開發人員可以在不同的操作系統上重用他們的界面代碼。
QML廣泛用于Qt應用程序開發，特別是移動和嵌入式應用程序。它與C++代碼可以無縫地集成，使開發人員可以在QML界面中調用C++的功能和邏輯。
1.創建QML工程
1）新建工程
打開QtCreator10,依次點擊“Create Project” --> “Application(Qt)” --> “Qt Quick Application(compat)”
注意：本人打算使用Qt5.15.2創建工程，而非Qt6,因此選擇兼容低于Qt6版本的“Qt Quick Application(compat)”來創建
?后面正常就可以了。
2、編譯、運行
創建完成后，直接編譯、運行即可，默認界面如下：
3、代碼講解?
main.cpp詳解?
頭文件
#include <QGuiApplication>
#include <QQmlApplicationEngine>?除了QQmlApplicationEngine其它頭文件很常見，QQmlApplicationEngine類下面會詳細講解
加載qml
下面的代碼等于 QQmlApplicationEngine engine(“qrc:/main.qml”);其它代碼是錯誤處理
QQmlApplicationEngine engine;const QUrl url(QStringLiteral("qrc:/main.qml"));QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,&app, [url](QObject *obj, const QUrl &objUrl) {if (!obj && url == objUrl)QCoreApplication::exit(-1);}, Qt::QueuedConnection);engine.load(url);return app.exec();
?
- 設置Qt應用程序的屬性，開啟高清晰度縮放功能；
- 創建QGuiApplication類的對象app，處理用戶界面事件和與操作系統的交互；
- 創建QQmlApplicationEngine類的對象engine，用于解析和加載QML文件；
- 定義一個url變量，用于指定QML文件的路徑；
- 連接engine的objectCreated()信號和app的exit()槽函數，以確保在對象創建失敗時退出程序；
- 調用engine的load()函數，從url指定的位置加載QML文件；
- 調用app的exec()函數，進入應用程序的事件循環，等待事件的發生并進行處理。
main.qml詳解
導入模塊
使用import來導入模塊，和include類似?
import QtQuick 2.12
import QtQuick.Window 2.12?元素、屬性
Window {width: 640height: 480visible: truetitle: qsTr("Hello World")
}
Window即是種元素，常見的元素還有：Rectangle、Text、Button、Image、MouseArea、Item等
width、height、visible、title等皆為屬性，
添加代碼：矩形元素(Rectangle): Rectangle元素用于創建矩形區域，可以設置顏色、邊框、陰影等屬性。例如，下面的代碼創建了一個紅色的矩形：
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle {width: 200height: 100color: "red"}
}?如圖：
再例如：
圖像元素(Image): Image元素用于顯示圖片，可以設置圖片的源文件、寬度、高度等屬性。例如，下面的代碼顯示了一個名為image.png的圖片：
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Image {source: "image.png"width: 200height: 200}
}
?
4、補充
4.1 元素列表
可在官網查看所有的元素：
Qt5：https://doc.qt.io/qt-5/qmltypes.html
Qt6：https://doc.qt.io/qt-6/qmltypes.html
4.2 屬性列表
以Window為例，Window的全部屬性可以在官網查看，Window屬性列表如下
active : bool 活動狀態
activeFocusItem : Item 當前具有活動焦點的項目
color : color 窗口的背景顏色
contentItem : Item 場景中不可見根項目？？？
contentOrientation : Qt::ScreenOrientation
data : list<QtObject> data 屬性允許您在一個窗口中自由混合可視子項、資源和其他窗口。
flags : Qt::WindowFlags
height : int
maximumHeight : int
maximumWidth : int
minimumHeight : int
minimumWidth : int
modality : Qt::WindowModality 窗口的形態
opacity : real 窗 口的不透明度
screen : variant 與窗口關聯的屏幕
title : string 窗口的標題
transientParent : QWindow 隨父窗口顯示或隱藏，如果設置為NULL，將獨立顯示
visibility : QWindow::Visibility 可見性是指窗口在窗口系統中是否應以正常、最小化、最大化、全屏或隱藏的方式顯示
visible : bool 窗口在屏幕上是否可見
width : int
x : int
y : int
QML事件處理
在QML中，可以通過處理鼠標事件、鍵盤事件以及使用輸入控件和焦點管理來實現事件處理。
鼠標事件處理: 在QML中，可以通過MouseArea元素來處理鼠標事件。以下是處理鼠標點擊事件的示例：
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MouseArea {anchors.fill: parent // 將MouseArea設置為與父元素相同大小onClicked: {console.log("Mouse clicked!")}}
}
?
?在上面的示例中，當鼠標在該矩形上點擊時，會觸發MouseArea的onClicked信號，從而打印出"Mouse clicked!"。
鍵盤事件處理: 在QML中，可以通過Item元素的Keys.onPressed或Keys.onReleased信號來處理鍵盤事件。下面是處理鍵盤按下事件的示例：
import QtQuick 2.12
import QtQuick.Window 2.12Window {visible: truewidth: 640height: 480title: qsTr("Hello World")Rectangle {width: 200height: 200color: "red"focus: true // 啟用焦點Keys.onPressed: {console.log("Key pressed:", event.key)}
}
}
在上面的示例中，當該矩形獲取焦點后，按下鍵盤上的任意鍵都會觸發Keys.onPressed信號，并打印出所按下的鍵所對應的ascll碼。
還有很多希望讀者更多探索！！！！！！
)
)
