一、QtQuick簡介

QT提供了兩種獨立的方法創建用戶界面。

QtQuick模塊為創建流暢、鮮活的用戶界面提供了一種標記語言。QtQuick模塊適合需要動畫元素的界面，以及應用程序主要運行在小屏幕和多點觸控的設備上的場景。模塊針對傳統桌面提供了更多的支持，和目標平臺做了更多的集成，無論目標平臺是MacOSX、Windows、KDE、GNome。QtWidgets是一個非常高效的基于C++的類庫，包含很多常見的用戶界面組件，可以非常容易地為已存在的組件擴展新的功能。

QtQuick模塊是使用QML語言編寫應用程序的標準庫。Qt QML模塊提供了QML引擎和語言架構，QtQuick模塊提供了使用QML語言創建用戶界面的所有基礎類型。

QtQuick模塊提供了兩套接口，QML API提供了使用QML語言創建用戶界面的QML類型，C++ API提供了使用C++代碼擴展QML應用程序接口。

QT4.7開始引入了QML，QML（Qt Meta-Object Language，Qt元對象語言）是一種用于描述應用程序用戶界面的聲明式編程語言。QML使用一些可視組件以及這些組件之間的交互來描述用戶界面，是一種高可讀性的語言，可以使組件以動態方式進行交互，并且允許組件在用戶界面中很容易地實現復用和自定義。QML允許開發者和設計者以類似的方式創建高性能的、具有流暢的動畫效果的、極具視覺吸引力的應用程序。QML提供了一個具有高可讀性的類似JSON的聲明式語法，并提供了必要的 JavaScript語句和動態屬性綁定的支持。

二、 Qt Quick工程實例

1、創建Qt Quick應用

?選擇Qt Quick?Application。

工程創建好后，Qt Quick工程包含QML文件、源文件

?2、QML文件

Main.qml文件：

import QtQuick 2.6 import QtQuick.Window 2.2Window {visible: truewidth: 640height: 480title: qsTr("Hello World")MainForm{anchors.fill: parentmouseArea.onClicked:{Qt.quit();}} }

QML文檔定義了一個QML對象樹，由兩部分組成：一個import導入部分，一個對象聲明部分。

import導入語句類似于C++中的#include，只有導入了相關模塊，才能使用其中的類型和功能。導入的模塊QtQuick模塊是在創建項目時選擇的組件集，包含了創建用戶界面所需要的基本類型和功能，QtQuick.Window模塊中提供了Window類型，可以為Qt Quick場景創建一個頂層窗口。

對象聲明部分，QML文檔中的對象聲明定義了要在可視場景中顯示的內容。工程創建了兩個對象：Window對象和其子對象MainForm。對象（object）由它們的類型（type）指定，以大寫字母開頭，后面跟隨一對大括號，在括號中包含了對象的特性定義，比如對象的屬性值或者其子對象。最外層的對象叫根對象，比如Window，在根對象里面定義的對象，叫做根對象的子對象，比如MainForm就是Window的子對象。 在Window中的visible是Window的屬性，用來設置窗口是否顯示，可以在幫助文檔中查看一個類型的所有屬性及用法。

MainForm不是QtQuick模塊中的類型，而是自定義的一個用戶界面表單（Qt Quick UI Forms），是Qt 5.4后提出的一個概念，類似于Qt C++編程中的UI文件，MainForm.ui.qml文件只能在設計模式下編輯。

import QtQuick 2.6Rectangle {property alias mouseArea: mouseAreawidth: 360height: 360MouseArea {id: mouseAreaanchors.fill: parent}Text {anchors.centerIn: parenttext: "Hello World"} }

在main.qml文件中，MainForm就是MainForm.ui.qml的一個實例，而MainForm內部調用了mouseArea屬性的onClicked事件處理器，相當于調用了MainForm.ui.qml中的MouseArea對象的onClicked事件處理器，Qt.quit()表明當在整個矩形中點擊鼠標時要執行的命令就是退出程序。

所有的QML文件是以資源的形式放在.qrc文件中的，QML文件不需要編譯，類似于素材。

3、源文件

Main.cpp文件：

#include <QGuiApplication> #include <QQmlApplicationEngine>int main(int argc, char *argv[]) {QGuiApplication app(argc, argv);QQmlApplicationEngine engine;engine.load(QUrl(QStringLiteral("qrc:/main.qml")));return app.exec(); }

main函數中定義了一個QQmlApplicationEngine對象，并用其加載了main.qml文件。QQmlApplicationEngine類結合了QQmlEngine和QQmlComponent兩個類的功能，提供了一個便捷的方式來加載一個QML文件，但QML文件的所有可視內容必須放在Window對象中才能最終顯示出來。

4、pri工程附屬文件

Deployment.pri文件：

unix:!android {isEmpty(target.path){qnx{target.path = /tmp/$${TARGET}/bin}else{target.path = /opt/$${TARGET}/bin}export(target.path)}INSTALLS += target }export(INSTALLS)

5、創建QML文件

要在工程中創建QML文件，創建QML文件的QML模板可以選擇Qt Quick 1、Qt Quick 2和QtQuickUI File三種，Qt Quick 1會導入QtQuick 1.1模塊，適用于Qt 4版本；QtQuick 2導入QtQuick 2.0模塊，適用于Qt 5版本；QtQuick UI文件生成后會默認使用設計器。

??

QML文件不需要進行編譯，可以直接運行。Qt提供了兩個運行QML文件的工具qmlviewer和qmlscene，前者是Qt 4時代的產物，主要用來顯示導入了QtQuick 1.1模塊的QML文件，而qmlscene用來顯示導入了QtQuick 2.0后版本的QML文件。選擇“工具→外部→QtQuick→Qt Quick 2Preview”菜單項即可在qmlscene中顯示現在打開的QML文檔的內容。

三、擴展QML程序

1、添加文本顯示

import QtQuick 2.0Rectangle {width: 100height: 62Text{text: "hello World"} }

Text對象用來顯示一塊文本，其text屬性用來指定要顯示的文本內容

2、錨布局

QML中每一個組件都有一組無形的錨，分別在上、下、左、右、中心等處，可以定義組件自身和其他組件的相對位置。centerIn指Text組件在parent組件的中心，parent指Text的父組件Rectangle。

import QtQuick 2.0Rectangle {width: 100height: 62Text{anchors.centerIn: parenttext: "hello World"} }

3、鼠標互動

import QtQuick 2.0Rectangle {width: 100height: 62Text{anchors.centerIn: parenttext: "hello World"}MouseArea{anchors.fill: parentonClicked:{Qt.quit()}} }

MouseArea子對象是鼠標區域，是一個不可見的組件，通過MouseArea對象可以實現鼠標互動。anchors.fill是進行填充，將鼠標區域覆蓋整個Rectangle窗口。onClicked是Qt C++中的信號處理函數，即信號處理器，其語法是on<Signal>，onClicked是Clicked單擊信號的處理，當在窗口上單擊鼠標后會執行Qt.quit()全局函數，執行結果就是退出程序。

4、id屬性和屬性別名

id屬性是一個對象的名字，來唯一確定一個對象，在其他對象中可以通過id引用該對象。

import QtQuick 2.0Rectangle {width: 100height: 62property ?alias mArea:mouseAreaText{anchors.centerIn: parenttext: "hello World"}MouseArea{id:mouseAreaanchors.fill: parent} }

MouseArea對象，設置其id為mouseArea，在Rectangle中可以通過mouseArea來訪問MouseArea對象。在其他QML文件訪問Rectangle內的子對象，需要在Rectangle中自定義屬性，并且該屬性需要是子對象的屬性別名，例如聲明的mArea屬性，alias表明mArea是mouseArea的別名。

mArea.onClicked: {Qt.quit() }

總結

以上是生活随笔為你收集整理的​Hello Qt（四十七）——QtQuick基础​的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。