[Qt] 002 - 第一個Qt Quick應用程式

Hello Qt5

建立新專案

前面我們安裝好了Qt Creator，現在就可以來進行開發，不能免俗地都要從Hello World開始，首先啟動Qt Creator，在歡迎畫面下的"Projects"頁面，選擇開啟新專案

專案類型選擇"Application"，Application類型則選擇"Qt Quick Application"，並點擊"choose"

然後指定專案名稱並選擇擺放路徑，點擊下一步

選擇QtQuick元件，這邊先選擇"Qt Quick 2.2"即可，其他容後再說明

再來選擇這個專案要使用那些編譯環境(可多選)，因為目前只安裝Qt 5.4及Qt 5.3下的MinGW編譯環境，所以只有這兩種選項，之後如果安裝了Android編譯環境，就會多出該選項，不過這部分的設定是可以隨時再修改的。

最後確認專案檔案內容即可完成新專案的建立。(可同時加入至版本控管，如Git)

完成後，會直接進入編輯畫面，並開啟main.qml這個檔案，這一小段QML程式碼稍後再做說明。

執行一下這個專案，可以透過"建置->執行"或透過鍵盤"Ctrl + R"，最方便快速的方式是直接點及畫面左下方的綠色三角形功能鍵

執行成功就可以看到這個畫面

很簡單吧!這樣就完成了第一個Qt Quick應用程式。針對程式碼的部分，我們在下一篇文章開始再說明，這邊先了解一下專案的組成結構。



專案檔案結構

首先我們來看一下專案裡有哪些檔案，以及分別是做甚麼用途。
以剛才建立的HelloQt5這個專案來看，會有一個".pro"檔以及多個子資料夾，分別是擺放應用程式佈署相關設定檔的"deployment"、擺放Source code(C++)的"源碼"、擺放如圖檔和QML檔案的"資源"。

這些子資料夾在這邊是專案所建立的"虛擬"資料夾，我們可以到對應的實體目錄看看，實際上這些檔案並沒有像專案結構上再區分資料夾來放置，不過專案檔案隨著內容增多勢必越來越多，建議還是建立實體資料夾來區分這些檔案會比較好管理。

HelloQt5.pro

每個專案都會有一個.pro檔，檔案內容就是這個專案的相關內容，包括專案使用的檔案，專案的類型，專案所需的Qt模組等，qmake會依照這個檔案的內容來產生編譯所需的makefile。

我們以HelloQt5.pro這個檔案為例來稍微說明一下

• "TEMPLATE = app" : 這行表示這個專案類型為一個application
• "QT += qml quick" : 這行表示這個專案使用了qml跟quick這兩個模組
• "SOURCES += main.cpp" : 表示原始碼僅有main.cpp這個檔案，一般來說，如果有標頭檔的話，也會另外用"HEADERS += xxx.h"列出來
• "RESOURCES += qml.qrc" : 表示須納入qml.qrc這個檔案中指定的資源，qrc是Qt Resource System所使用的，可提供給專案執行時期存取。以這個qml.qrc來說，裡面就只有一個檔案，就是main.qml。通常我們會將專案所需的圖檔、QML檔、翻譯檔等資源都分別建立.qrc檔放置於專案中。有關於Qt Resource System的詳細介紹可參考此連結。
• "QML_IMPORT_PATH = " : 這行表示，如果有需要一些在Qt的QML模組中之外的(可能是第三方或自建的)QML元件，那必須指定其路徑，讓Qt Creator可以解析。
• "include(deployment.pri)" : 表示需載入deployment這個子專案，以deployment.pri的內容(如下圖)來看，描述了這個專案針對不同執行環境佈署時所需的檔案資訊。

關於.pro檔和qmake的其他說明，可以參考這個連結
http://doc.qt.io/qt-5/qmake-project-files.html

而QML的部分，我們之後會有大量的相關文章來做介紹。


專案建置環境設定

接下來我們看一下專案的建置環境設定，透過建置環境的設定，可以將原始碼依照不同的執行平台進行編譯，方可順利運行在對應的平台上。
首先將Qt Creator切換到"專案"畫面，可以看到專案的建置相關設定，如下圖所示

這個畫面包括專案建置(build)的目錄，建置的步驟及環境變數等設定，目前看到的值主要都是依照預設的編譯套件(Kit)所建立，可以切換建置環境與執行環境的設定。建置環境是針對指定平台的編譯環境，執行環境則是編譯完成後佈署和執行的相關設定。

我們可以選擇不同的編譯套件來建置該專案，還記得嗎?我們之前在安裝的時候，我們同時安裝了Qt 5.3跟Qt 5.4，分別對應了不同的MinGW版本，這邊可以加入或切換編譯套件。

從編譯套件的管理工具可以看到目前有哪些編譯套件可使用，系統會自動偵測安裝過的編譯套件，另外也可自行加入(如自行編譯的Qt 4.x)。這些編譯套件的名稱是可以自行修改的，整個套件包括Qt版本、使用的Compiler等設定。

加入編譯套件

我們可在上面提到的編譯套件管理工具加入新的編譯套件，針對專案本身使用的編譯環境，除了在一開始專案建立時就選擇的之外，也可在此畫面加入其他建置環境供此專案選擇使用。以這個專案來說，一開始我們只選擇了Qt 5.4.0這個編譯套件，所以我們還可以加入Qt 5.3.0這個編譯套件。

加入編譯套件後，可在上方看到此專案有兩組建置環境可供選擇切換

此時切換至剛才加入的編譯套件(Qt 5.3.0)，可看到視窗右下角顯示Qt Creator正在依照所選的編譯套件產生其專案建置環境的設定值

若不加入的話，其實也可以直接切換編譯套件，如此該專案仍舊只有一組建置環境

目前為止，我們可以簡單建立一個Qt Quick應用程式，也大概了解專案的組成，接下來我們可以開始進行主軸的部分，也就是Qt Quick的介紹。

[Qt] 001 - 從安裝開發環境開始 : Qt Creator

安裝Qt Creator

所謂"工欲善其事，必先利其器"，要開發Qt應用程式的第一步，當然是從安裝開發環境開始，Qt官方提供一套完整的IDE(Integrated Development Environment)，名為Qt Creator，支援在主流的作業系統上使用，包括Windows、Linux、Mac OS X，支援的平台及編譯器可參考此連結。
Qt Creator內容包括開發工具本身已及相關的函式庫，依照不同授權方式區分版本，以Open Source版本為例，安裝分為兩種方式，透過安裝檔安裝或者下載原始碼自行編譯並安裝，以下就針對Windows使用者透過安裝檔安裝作為範例教學。
(如果你想要自行編譯原始碼的話，請參考此連結。)


下載

請先至官方下載頁面選擇你要下載的版本，目前官方有提供試用30天的商業版，這邊以大多數人下載的社群(Open Source)版為例

該頁面會自動偵測你的作業系統，並顯示建議下載的安裝檔，基本上都是建議下載線上安裝檔，如果你依照建議選擇此安裝檔，請在安裝期間保持網路連線

除了線上安裝檔，也提供離線安裝的完整安裝包，以不同作業系統區分，使用者可依自己的需求選擇下載

從下載列表的選項可看出，除了iOS應用程式必須在Mac OS X環境下開發，Android可以在任一作業系統下開發，而每個作業系統當然可以開發執行於其系統本身下的桌面應用程式，比較特別的是，開發Windows應用程式有不同的編譯環境可選擇，可以選擇使用MinGW(Minimalist GNU for Windows: 執行於Windows環境下的GCC編譯器)或透過Visual Studio本身的編譯器來開發，而有註明OpenGL的表示其繪圖API採用OpenGL這套框架，否則就是微軟本身的DirectX，另外針對Windows RT下的應用程式開發也有支援。


安裝

不論你是採用官方提供的安裝包來安裝，或是自行編譯原始碼來安裝，都有一些系統需求上的條件必須注意
Windows的請參考此連結http://doc.qt.io/qt-5/windows-requirements.html
Linux的請參考此連結http://doc.qt.io/qt-5/linux.html
Mac OS X的則參考此連結http://doc.qt.io/qt-5/osx.html

這邊以在Windows下透過線上安裝為例，下載完成後雙擊該安裝檔，就可進入安裝畫面

點選下一步，就會透過線上伺服器取得下載資訊

然後選擇安裝路徑

再來選擇安裝內容，預設是Qt 5.3跟Qt 5.4都會安裝

展開來看，預設是選擇MinGW版本，Qt 5.4搭配MinGW 4.9.1

而Qt 5.3則搭配MinGW 4.8.2

開發工具Qt Creator當然是必要安裝的，不能從安裝內容中移除，目前版本是3.3.0

基本上都依這預設選擇安裝即可，除非有特殊需求，舉例來說，想要同時開發Android App那就得選擇對應選項，這部分我們之後再另闢專題來講解。
選定安裝內容後進下一步，閱讀並勾選同意授權協議

然後就可以開始安裝了

此時會開始下載必要檔案執行安裝程序

經過一段時間的等待就安裝完成囉!

完成後可以立即啟動Qt Creator

Qt Creator

Qt Creator是Qt官方提供的IDE(Integrated Development Environment，整合開發環境)，就像微軟的Visual Studio和著名的Eclipse一樣，方便開發人員在單一工具下開發相關的應用程式。

Qt Creator提供多種工具，像是建構UI的Qt Designer、產生專案對應Makefile的qmake、多國語言編輯工具Qt Linguist、文件小幫手Qt Assistant，詳細介紹可參考http://doc.qt.io/qt-5/topics-app-development.html

啟動Qt Creator的"歡迎"畫面如下

可以先從"說明->關於Qt Creator"查看版本資訊，安裝的時候是選擇MinGW，但這邊卻顯示MSVC 2010，似乎有誤!?不過沒關係，並不會影響到接下來的開發

在歡迎畫面中，可以切換三個不同頁面，分別是一啟動就看到的"Projects"以及"範例"和"教學"，在範例中列出安裝時一併下載的範例程式

而在教學頁面中則列出提供開發相關的教學線上影片

開發環境準備好了之後，我們就可以開始進行開發了!

[Qt] 000 - 認識Qt

What is Qt?

Qt簡介

Qt(官方唸法同"Cute"，但一般都直接把字母分開唸為Q-T)，是一套跨平台(cross-platform)的C++框架(framework)，提供完整的函式庫(Library)，可以執行在多數的裝置上，包括桌上PC、行動裝置、嵌入式系統，都能見到它的身影。


Qt歷史

Qt初期是由一家名為Trolltech(奇趣科技)的公司所發表，後來這家公司被NOKIA(諾基亞)併購，早期NOKIA手機的Symbian系統中軟體就是使用Qt開發的。

隨著智慧型手機的盛行，NOKIA在手機市場漸漸式微，完全被Android和iOS陣營取代，另外電腦CPU霸主的Intel也一直想打入這塊市場，然而在行動裝置和嵌入式系統相關領域中以往都是ARM CPU所主導，於是Intel和NOKIA合作推出了一套以Linux為基礎，名為"MeeGo"的作業系統，主攻當時盛行的小筆電以及剛興起的智慧型手機，欲依循Apple的模式建構一個完整的生態鏈，但MeeGo最後隨著NOKIA抽手轉往微軟陣營無疾而終，Qt也賣給了digia公司繼續經營。

(註:後來Intel改與Samsung(三星)合作，由三星推出名為Tizen的作業系統，主攻智慧型手機及穿戴裝置，欲拋開在Android上被Google的箝制，像是三星自家的智慧型手錶Galaxy Gear系列產品，大部分就是採用Tizen作業系統，而不是使用Google官方的Android Wear。)

不論MeeGo和後續的Tizen，甚至像是Ubuntu Phone中的作業系統(名為Ubuntu Touch)，主要都是由Qt所開發而成的，Qt的蹤跡也從原本嵌入式系統為主，踏進行動裝置的領域。


版本演進

Qt的第一個版本為Qt 1.0，發表於1996年，2005年發布了Qt 4，為版本上的一大演進，相關的應用主要都是這個階段，市面上可以找到的資料與相關教學也都是以Qt 4為主，以筆者自身為例，開始接觸Qt時的版本為Qt 4.7，在當時，能參考的資料都是以Qt 4.6之前的為主。

而Qt 4.7推出了新的UI建構框架，稱為Qt Quick(使用QML這個描述式語言)，恰巧筆者因負責的專案所需，也採用了此快速建立UI的方式，一腳踏進了Qt Quick的世界。

Qt 5也是一個版本上的大躍進，除了納入跟主流行動裝置平台(Android/iOS)的整合開發環境，在Qt Quick的版本上也從1.0升級為2.0，修改了底層繪製圖形(Render)的方式，改採基於OpenGL/ES的繪製方式，稱為Qt Quick Scene Graph。


授權方式

Qt在開放原始碼(Open Source)領域中，是廣泛被使用的一套開發框架，像是著名的Linux桌面環境KDE，就是採用Qt開發，甚至像是最多人使用的Linux發行板Ubuntu，其預設桌面環境的開發框架選擇也從GTK+轉為Qt為主。

Qt的授權方式除了免費的Open Source外，也有需要付費的商業版(Commercial)，在Open Source的部分，採用的授權方式包括GPL與LGPL(GPL v3、LGPL v2.1、LGPL v3)，詳細內容可參考此連結http://doc.qt.io/qt-5/licensing.html

Qt在digia接手後，除了致力於原有Open Source社群的推廣外，將其重心擺在企業版Qt(Enterprise Qt)的合作與商業版Qt的推廣，並於2014年將Qt從母企業中獨立出來為一家公司，稱為The Qt Company，同時官網亦改為http://www.qt.io/


How to?

如何入門

有鑑於Qt 5的中文線上資源有限，對於初學者而言，除了官方線上文件和坊間翻譯(以簡體中文為主)，在台灣並未有太多相關的系列教學文章，筆者透過自身在此領域初淺的經驗，使用Qt 5為基礎，將陸續發表一系列文章，以Qt Quick 2為主，搭配Qt C++，引領有興趣的同好，一起學習開發Qt應用程式。

針對進階使用者，包括跨平台(以Android為主)的整合開發，甚至是嵌入式系統(Raspberry Pi)上的應用，有機會的話，筆者都盡量加入探討的範圍中。

本人文筆尚稱拙劣，加上Qt 5只是利用工作之餘來抽空了解，能力與時間有限，且Qt 5和過去筆者熟悉的Qt 4.7/4.8比較起來，還是有些許差異。若是在系列文章中，有任何需要改進，希望各位讀者能不吝提出建議。


線上資源

官方線上文件
官方Blog
A Book about Qt5
Qt Taiwan社群討論區(Google +)
台灣Qt使用者社群(Google 協作平台)