Qt Quick入門教程之基礎(一)熟悉Qt Quick的世界

導語

從這一篇開始,咱們正式步入Qt Quick的世界,讓我們一起來探索這個全新的、有趣的、易於使用的界面開發技術。Qt Quick到底是什麼?其實對於新的東西,它的定義往往是模糊的,而且會不斷變化,因爲它本身在快速發展。所以,對於初學者,一些概念性的東西不要較真,我們只需要知道有這樣一個東東,它現在能做什麼,然後再去了解它,使用它,等你真正熟悉它的時候,它的定義也就不言自明瞭。當然,下面我們還是會對基本的概念進行介紹,這裏提及這些只是提醒初學者,即便看下面的內容一頭霧水也沒有關係,後面慢慢會明白的。

下面讓我們開始!

什麼是QML

QML(Qt Meta-Object Language,Qt元對象語言)是一種用於描述應用程序用戶界面的聲明式編程語言。它使用一些可視組件,通過這些組件之間的交互來描述用戶界面。QML是一種高可讀性的語言,可以使組件以動態方式進行交互,並且易於複用和自定義。

QML允許開發者和設計者進行聯合創作,快速創建高性能的、具有流暢的動畫效果的、極具視覺吸引力的應用程序。QML提供了一個具有高可讀性的類似 JSON 的聲明式語法,並提供了必要的 JavaScript 語句和動態屬性綁定的支持。

在Qt 5中,QML語言和引擎框架由Qt QML模塊提供。

什麼是Qt Quick

Qt從4.7版本引入了Qt Quick技術。當時對Qt Quick的定義爲:

一種高級用戶界面技術,可以輕鬆創建供移動和嵌入式設備使用的動態觸摸式界面和輕量級應用程序。Qt Quick主要由一個改進的Qt Creator IDE(其中包含了Qt Quick設計器)、新增的簡單易學的QML語言和新加入Qt庫中名爲QtDeclarative的模塊等三部分組成。這些使得QML更方便不熟悉C++的開發人員和設計人員使用。
從這個定義來看,其實Qt Quick就是Qt引入的全新的界面編程方式(這個說法可能欠妥)的通稱。在Qt 5中,Qt Quick被描述爲QML類庫:Qt Quick是QML的一個數據類型和功能的標準庫,包含了可視化類型、交互類型、動畫、模型和視圖、粒子特效和渲染特效等。在QML應用程序中,可以通過一個簡單的import語句來使用該模塊提供的所有功能。

在Qt 5中,Qt Quick由Qt Quick模塊提供。

到這裏,也許你還是搞不清楚什麼是Qt Quick,那麼想想C++跟Qt的關係吧,它們類似於QML和Qt Quick的關係。

再次提醒,對於初學者,不要被後面衆多的概念所束縛,由於是新技術,現在還沒有統一的官方的中文翻譯標準,而且對於一些名詞可能在不同語境有不同的意思,這需要熟練掌握以後才能更好地理解。現在需要做的只是瞭解,然後接着學下去。

下載安裝Qt 5.12

這裏使用了現在最新的Qt 5.12.0開源版本。下載地址:

https://download.qt.io/official_releases/qt/5.12/5.12.0

我們使用Windows平臺進行演示,所以這裏選擇下載文件:

qt-opensource-windows-x86-5.12.0.exe

在選擇組件界面可以選擇安裝一些模塊,爲了開發桌面應用、Android應用,要選中MinGW 7.3.0 64-bit和Android ARMv7兩個組件,它們分別提供了桌面和Android開發庫;還可以選中另外一些組件,比如選擇Qt Charts、Qt Data Visualization,後期圖表繪製和數據可視化內容需要用到。如下圖所示。
在這裏插入圖片描述

創建Qt Quick項目

在Qt Creator菜單中選擇”文件→新建文件或項目“,會彈出新建對話框,模板選擇中Application 一項後面列出了四個現成的Qt Quick應用模板,分別是Qt Quick Application - Empty、Qt Quick Application - Scroll、Qt Quick Application - Stack、Qt Quick Application - Swipe,如下圖所示。
在這裏插入圖片描述

有IDE使用經驗的同學都應該知道,提供模板只是爲了減少前期創建項目的工作,所以使用哪個模板其實是無所謂的,裏面生成的內容我們都可以自己手動添加。鑑於我們面對初學者,而且後面三個模板會涉及Qt Quick Controls的內容,所以這裏就不再演示,有興趣的同學可以自己創建項目看看效果。下面我們選擇Qt Quick Application - Empty,繼續教程。

接下來是設置項目名稱和路徑,名稱我設置爲了helloandroid(項目名稱大家可以按照自己的習慣設置,對於初學者,也可以像我這樣都使用英文小寫字母),路徑大家隨意設置,注意不要有中文和特殊字符即可。
在這裏插入圖片描述

在Build System頁面我們保持默認,使用qmake。
在這裏插入圖片描述

下面是選擇最低需要的Qt版本,這裏如果選擇的版本過高,那麼將源碼給低版本的Qt編譯,將會出現錯誤。其實,這裏選擇什麼,對於生成的源碼也只是import Qt Quick後面的版本號不同,所以可以隨意選擇,後面需要使用特定功能的時候,直接在源碼中修改import語句後面的版本號即可。現在保持默認Qt 5.9就行。
在這裏插入圖片描述

接下來是構建套件選擇,現在默認只有一個桌面版的,我們保持默認即可。
在這裏插入圖片描述

最後可以選擇版本控制系統等,我們這裏不需要,不進行設置,單擊“完成”按鈕完成項目的創建。
在這裏插入圖片描述

生成的項目如下圖所示。
在這裏插入圖片描述

可以看到,這就是一個標準的Qt項目,只不過在資源文件中多了一個main.qml文件,這個文件就是QML文件,當然裏面就是用QML語言編寫的代碼,我們先睹爲快:

1 import QtQuick 2.9
2 import QtQuick.Window 2.2
3
4 Window {
5    visible: true
6    width: 640
7    height: 480
8    title: qsTr("Hello World")
9}

多麼簡約易懂的代碼啊!其實即便不解釋,沒有編程經驗的同學也應該能看懂是什麼意思吧!下面直接按下左下角運行按鈕,或者使用Ctrl+R快捷鍵運行項目,效果如下圖所示。

在這裏插入圖片描述
當然,界面上什麼都沒有!這空白的界面就是爲了後面讓我們發揮想象力和創造力準備的!

運行示例程序

瞭解一個新東西最好的方式,就是看它的實際應用。單擊左側“歡迎”按鈕,或者按下Ctrl+1快捷鍵,來到歡迎界面。在搜索欄輸入quick關鍵字就可以過濾出所有Qt Quick相關的示例程序。

大家可以選擇自己感興趣的內容進行單擊,比如這裏單擊clocks程序,就會彈出該項目的介紹文檔,可以簡單看下,然後需要在項目模式選擇構造套件,這裏直接單擊“Configure Project”即可。
在這裏插入圖片描述

打開後可以直接運行程序查看效果,如下圖所示。

在這裏插入圖片描述

如果大家想對示例程序的源碼進行修改,建議先將源碼複製一份,然後重新打開復製出來的源碼再進行修改,這樣即便修改亂了,還可以使用原始的文件。要快速找到源碼目錄,可以在項目任意文件上右擊,然後選擇在“Explorer中顯示“即可,如下圖所示。
在這裏插入圖片描述

結語

這一篇我們正式開始了Qt Quick內容的學習,內容雖然不多,但是對於從來沒有接觸過Qt Quick的新人來說,一些概念可能還是無法很好地理解。現在大家可以多看下示例程序,只看運行效果,看看Qt Quick應用都是什麼樣子的,都實現了哪些功能,先有個大概認識即可。

參考文檔

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章