1. 程式人生 > >Qt Quick 之 Hello World 圖文詳解

Qt Quick 之 Hello World 圖文詳解

               

    在上一篇文章,《QML 語言基礎》中,我們介紹了 QML 語言的語法,在最後我們遺留了一些問題沒有展開,這篇呢,我們就正式開始撰寫 Qt Quick 程式,而那些問題,隨著本系列文章的展開也會一一被幹掉。

    在開始介紹 Qt Quick 應用的基本元素之前,我們先來建立一個 HelloQtQuickApp 專案,就是經典的 Hello World 了。

HelloQtQuickApp

    從零開始。

建立專案

    開啟 Qt Creator ,點選文 "件(F)" 選單,在彈出的選單列表中選擇 "新建檔案或專案(N)" 。如下圖所示:

    如上操作後, Qt Creator 會彈出新建專案介面,讓我們選擇應用模板。如下面的所示:

    這裡我們選擇 "應用程式" 專案, "Qt Quick Application" 模板。可以看到最右側的實時提示,說這模板支援 QML 和 C++ 混合程式設計,這正是我們需要的,因為筆者最終提供的有使用價值的例項就是混合了 QML 和 C++ ,而且我的觀點也正是這樣:複雜的應用,使用 QML 快速構建介面,使用 C++ 完成關鍵演算法和邏輯。另外還看到支援 Destop 和 Android 兩個平臺。    點選 "選擇(C)..." 按鈕,新建專案嚮導會指引我們進入下一環節 "專案介紹和位置" 。參考下圖:

    請參考上圖,將專案名稱設定為 HelloQtQuickApp 。

    點選 "下一步" 按鈕,跟隨嚮導進入元件選擇環節,如圖:

    請參考圖示,選擇  Qt Quick 2.0 。

    點選 "下一步" 按鈕,跟隨嚮導進入構建套件選擇("Kit Selection")環節。    我選擇了兩個套件,"Android for armeabi-v7a (GCC 4.7, Qt 5.2.0)" 和 "Desktop Qt 5.2.0 MinGW 32bit" 。請對照下圖檢查你的配置。

    點選 "下一步" 按鈕,跟隨嚮導進入 "專案管理" 環節。在這裡你可以選擇是否將專案加入版本控制系統(如 svn 之類),還可以看到即將新增到我們的 "HelloQtQuickApp" 專案中的檔案。如下圖所示:

    終於看到 "完成(F)" 按鈕了,趕緊點選它!你會看到下面的專案編輯介面(我展開了專案檢視以便看到專案中的所有檔案):

    雖然是一個簡單的 Hello World ,嚮導還是很熱情地給我們添加了很多檔案,比如 qtquick2applicationviewer.h / qtquick2applicationviewer.cpp / main.cpp / main.qml 。接下來我們做點兒小改動。

執行專案

    請把 main.qml 檔案中的 "Hello World" 替換為 "Hello Qt Quick App" ,然後直接執行專案,(在電腦上)即可看到下面的效果:

    好啦,我們的 HelloQtQuickApp 專案就這麼完成了。

在手機上執行

    接下來讓我們做一些改動以便 HelloQtQuickApp 能夠在 Android 手機上執行。

    看下圖:

    首先我們需要點選標號為 1 的標籤進入專案屬性配置介面;然後點選標號為 2 的按鈕,切換到 Android 執行選項;第三步呢,標號 3 的詳情按鈕點一下,展開部署詳情;然後呢,參考標號 4 ,選擇 Qt 部署策略為 Use Ministro service to install Qt ;最後一步,就是標號 5 所示按鈕,建立 Android 應用需要的 AndroidManifest.xml 檔案,點選後看到下面的介面:

    直接點選 "完成(F)" 按鈕即可。然後就進入了 AndroidManifest.xml 編輯介面:

    你可以按照圖示,修改應用的包名,筆者修改為 an.qt.helloQtQuickApp ,然後關閉 AndroidManifest 編輯介面時會提示你儲存,選擇儲存所有就行了。

    新的專案檢視如下:

    注意我標註的區域。

    現在我們的專案終於完善了,可以在 Android sh上運行了。如對 Qt on Android 專案設定有不明之處,請移步我另外一篇文章——《Qt on Android:圖文詳解Hello World全過程》,如果你還沒搭建好 Qt on Android 開發環境,請參考《Windows下Qt 5.2 for Android開發入門》。

    執行專案,會讓你選擇目標裝置,我連線的真機,選擇了真機。具體請參考《Qt on Android:圖文詳解Hello World全過程》。下面是執行效果截圖:

    看起來沒什麼吸引人的?不錯,確實如此。不過呢,這只是開始,剛剛開始。隨著深入學習,你可以自己製作出精美的應用和炫酷的遊戲。如果你已經迫不及待了,請把 Qt SDK 中的 Qt Quick 的示例程式找幾個出來跑跑看。

    哎呀,看起來,對於 Qt Quick 基本元素的介紹——《Qt Quick 簡單教程》——只能放到下一次了……