一、1、特點(diǎn)
Qt Quick是一個(gè)現(xiàn)代化的、基于QML的框架。
● QML是Qt Quick的關(guān)鍵組成部分,是一種基于JavaScript的聲明性語(yǔ)言,用于描述用戶界面的視覺(jué)和行為。
● Qt Quick Controls是一套預(yù)先設(shè)計(jì)好的用戶界面元素庫(kù),包含了諸如按鈕、文本框、菜單等常見的UI控件。這些控件可以被輕松地嵌入到QML界面中,并且能夠很好地適應(yīng)不同平臺(tái)和設(shè)備。
● Qt Quick可以用于多種平臺(tái),包括桌面、移動(dòng)設(shè)備和嵌入式系統(tǒng)。
二、Qt Quick 基本元素
Qt Quick 作為 QML 的標(biāo)準(zhǔn)庫(kù),提供了很多基本元素和控件來(lái)幫助我們構(gòu)建 Qt Quick 應(yīng)用。如果拿 C++ 來(lái)比擬, QML 就相當(dāng)于 C++ 語(yǔ)言本身,而 Qt Quick 相當(dāng)于 STL 。好吧,你可能覺(jué)得有點(diǎn)驢頭不對(duì)馬嘴,沒(méi)關(guān)系,有這么點(diǎn)兒意思就成。
Rectangle
main.qml 的第三行代碼,定義了一個(gè) Rectangle 類型的對(duì)象作為 QML 文檔的根對(duì)象。關(guān)于對(duì)象在 qml 文件中的描述,《Qt on Android:QML 語(yǔ)言基礎(chǔ)》一文中已經(jīng)講解,這里不再贅述。下面咱們看看 Rectangle 到底是什么。
Rectangle 用來(lái)繪制一個(gè)填充矩形,可以帶邊框,也可以不帶,可以使用純色填充,也可以使用漸變色填充,甚至還可以不填充而只提供邊框……
Rectangle 有很多屬性。
width 用來(lái)指定寬, height 用來(lái)指定高,我們已經(jīng)見識(shí)過(guò)了。
color 屬性可以指定填充顏色,而 gradient 屬性則用來(lái)設(shè)置漸變色供填充使用,如果你同時(shí)指定了 color 和 gradient ,那么 gradient 生效;如果你設(shè)置 color 屬性為 transparent ,那么就可以達(dá)到只繪制邊框不填充的效果。
border.width 指定邊框的寬度, border.color 指定邊框顏色。
Rectangle 還可以繪制圓角矩形,你只要設(shè)置 radius 屬性就行了。
三、QML與QtQuick關(guān)系
“QML——Qt Meta Language”
QML是一種聲明式腳本語(yǔ)言,是QtQuick技術(shù)的核心與基礎(chǔ)。
QML是一種規(guī)范和編程語(yǔ)言,可以用來(lái)描述一個(gè)程序的UI。
QML模塊提供QML引擎和語(yǔ)言框架——負(fù)責(zé)解析qml腳本。
1、QML文檔分為import 和declaration兩部分。
import部分,指定該文檔所需要引入的模塊,通常是一個(gè)模塊和版本號(hào)。也可以引入其他文件。
四、Qt Widgets 與 QML/Qt Quick
Qt 4.7 發(fā)布時(shí),引入了 QML,用于移動(dòng)開發(fā),其全面支持觸摸操作、流暢的動(dòng)畫效果等。但在 Qt 5 中,QML 已經(jīng)不再局限于移動(dòng)開發(fā),也可用于開發(fā)傳統(tǒng)的桌面程序。
相比之下,Qt Widgets 更“老”、更成熟,而 QML/Qt Quick 則更“新”、更“現(xiàn)代”。
無(wú)論如何,Qt Widgets 和 QML/Qt Quick 都可以在多個(gè)平臺(tái)上使用(Windows、Linux、OS X等)
對(duì)于傳統(tǒng)的桌面程序來(lái)說(shuō),優(yōu)先考慮使用 Qt Widgets,若要開發(fā)更“現(xiàn)代”的 UI 與高級(jí)應(yīng)用,建議使用 Qt5.x + QML 2.x + QtQuick 2.x。
對(duì)于移動(dòng)端開發(fā)來(lái)說(shuō),建議使用 QML,協(xié)同 JavaScript,簡(jiǎn)單快捷、渲染效果更佳、界面更炫酷。不建議使用 Qt Widgets,其顯示效果、適應(yīng)性都不好
五、QtQuick 1.x VS QtQuick 2.x
全新的 Qt 版本
QtQuick 1.x 基于 Qt4.x。
QtQuick 2.x 隨 Qt5.0 一起引入。
全新的繪圖系統(tǒng)
QtQuick 1.x 使用 QGraphicsView/QPainter API 來(lái)繪制場(chǎng)景。
QtQuick 2.x 基于 Scene Graph,一個(gè) OpenGL(ES)2.0 抽象層,對(duì)繪圖進(jìn)行了高度優(yōu)化,效率更高。
全新的 QML 引擎
Qt 4.x 中,QML 引擎基于JSC(JavaScriptCore - Webkit 的 JS 引擎)。
Qt 5.0 中引入 V8(Google 的開源高性能 JavaScript 引擎,用 C++ 編寫,用于 Chromium、Node.js 和多個(gè)其他嵌入應(yīng)用程序)。
Qt 5.2 中引入了 V4 JS 引擎,針對(duì) QML 用例進(jìn)行了優(yōu)化,并且可以選擇關(guān)閉 JIT(Just-In-Time)編譯,以符合 iOS 和 WinRT 平臺(tái)的限制。個(gè)頭更小、反應(yīng)更快、擴(kuò)展性也非常好。
從 Qt 5.5 開始,加入了一個(gè)新模塊 QtQuick3D,它提供使用 QML 語(yǔ)言創(chuàng)建 3D 應(yīng)用程序/游戲的能力,其使用的是一個(gè)被命名為 FrameGraph 的新引擎,而非 Scene Graph(因?yàn)樘?2D/2.4D)。
模塊、屬性和方法、類型和 API、C++ 代碼(QtDeclarative 被移除了,替代的它是Qt QML 和 Qt Quick 模塊)、QML 插件的更改
六、什么是QML?
QML是一種用戶界面規(guī)范和編程語(yǔ)言。它可以使開發(fā)人員和設(shè)計(jì)師創(chuàng)建出高性能、流暢動(dòng)畫和視覺(jué)吸引力的應(yīng)用程序。QML提供了一種高度可讀的、聲明式的、類似JSON的語(yǔ)法,支持與動(dòng)態(tài)屬性綁定相結(jié)合的命令式JavaScript表達(dá)式。
QML語(yǔ)言和引擎基礎(chǔ)設(shè)施由Qt QML模塊提供。
七、什么是Qt Quick?
Qt Quick是用于QML的標(biāo)準(zhǔn)類型和功能的庫(kù)。它包括可視類型、交互類型、動(dòng)畫、模型和視圖、粒子效果和著色器效果。通過(guò)一個(gè)導(dǎo)入語(yǔ)句,QML應(yīng)用程序開發(fā)人員可以獲得所有這些功能。
Qt Quick模塊提供了QtQuick QML庫(kù)。
八、只有qml沒(méi)有quick可以開發(fā)嗎
可以僅使用QML來(lái)開發(fā)應(yīng)用程序,而不使用Qt Quick模塊。
QML是一種用于描述用戶界面的聲明性語(yǔ)言,它可以獨(dú)立于Qt Quick模塊使用。
你可以在QML中創(chuàng)建自定義的界面組件、布局和邏輯,并且可以使用JavaScript來(lái)處理用戶輸入和實(shí)現(xiàn)應(yīng)用程序的行為。
但是,使用Qt Quick模塊可以為QML提供更多的預(yù)定義類型和功能,使開發(fā)過(guò)程更加簡(jiǎn)單和高效。
九、main.cpp
注意: Qt Quick 的mian函數(shù)有點(diǎn)區(qū)別,加載UI的方式不同,程序如下
#include <QGuiApplication>
#include <QQmlApplicationEngine>
int main(int argc, char *argv[])
{
/* 啟用Qt應(yīng)用程序的高DPI縮放功能 */
QCoreApplication::setAttribute(Qt::AA_EnableHighDpiScaling);
/* 創(chuàng)建一個(gè)Qt應(yīng)用程序的實(shí)例 */
QGuiApplication app(argc, argv);
QQmlApplicationEngine engine;
const QUrl url(QStringLiteral("qrc:/main.qml"));
/* 將 QQmlApplicationEngine 對(duì)象的 objectCreated 信號(hào)連接到一個(gè) lambda 函數(shù)上 */
/* lambda 函數(shù)用于在 QML 文件中的根對(duì)象被創(chuàng)建時(shí)進(jìn)行處理,檢查對(duì)象是否成功創(chuàng)建,如果創(chuàng)建失敗則退出應(yīng)用程序 */
QObject::connect(&engine, &QQmlApplicationEngine::objectCreated,
&app, [url](QObject *obj, const QUrl &objUrl) {
if (!obj && url == objUrl)
QCoreApplication::exit(-1);
}, Qt::QueuedConnection);
/* 加載QML文件并顯示用戶界面 */
engine.load(url);
return app.exec();
}