1. 程式人生 > >第一個Qt Quick程式(QML程式)

第一個Qt Quick程式(QML程式)

上一節我們詳細講述了Qt 4.7和Qt Creator 2.0的安裝。這一節,我們講述Qt Quick的應用。

Qt Quick是Qt 4.7主推的技術,下面是Qt官網對其進行的介紹:

Qt Quick 是一種高階使用者介面技術,使用它可輕鬆地建立供移動和嵌入式裝置使用的動態觸控式介面和輕量級應用程式。三種全新的技術共同構成了 Qt Quick 使用者介面建立工具包:一個改進的Qt Creator IDE、一種新增的簡便易學的語言 (QML) 和一個新加入 Qt 庫中名為 QtDeclarative 的模組,這些使得 Qt 更加便於不熟悉 C++ 的開發人員和設計人員使用。

下面我們先到Qt Creator

中檢視相關幫助檔案,讓我們對它有個大體的瞭解。

我們檢視Qt Creator中的幫助Help,首先進入我們眼簾的便是Qt Creator的介紹,在這裡你可以檢視Qt Creator的相關資訊和使用方法。

 Hosted by ImageHost.org

我們檢視下面的目錄,可以看到這裡有簡單的工程的建立教程。我們進入Creating an

Animated Application 的連結,這個便是一個最簡單的QML工程的教程,你可以參考一下。

 Hosted by ImageHost.org

下面我們建立自己的QML工程。

1.新建Qt QML Application ,工程名設定為helloWorld 

 Hosted by ImageHost.org

2.我們點選helloWorld.qmlproject檔案。

在這裡可以看到它就是包含了幾個資料夾的路徑資訊,預設的都是本工程資料夾。

在最上面,有一句提示,Do you want to enable the experimental Qt Quick Designer? 你是否要啟用實驗中的Qt Quick Designer?當然,所以我們點選後面的按鈕來啟用Qt Quick Designer。

 Hosted by ImageHost.org

3.這時彈出一個提示框。

它的大體內容是,如果啟用Qt Quick Designer ,將影響Qt Creator的整體穩定性。還告訴了我們怎麼停用Qt Quick Designer。我們選擇“Enable Qt Quick Designer”。

 Hosted by ImageHost.org

4.我們關閉Qt Creator,然後重新開啟它。我們再次開啟剛才建立的工程。

雙擊helloWorld.qml檔案,這時我們期盼已久的Qt Quick Designer介面終於出現了。對於這個介面,我們以後再詳細講解。

 Hosted by ImageHost.org

5.我們再次回到Edit模式下,檢視helloWorld.qml檔案的內容。

import Qt 4.6

Rectangle {

    width: 200

    height: 200

    Text {

        x: 66

        y: 93

        text: “Hello World”

    }

}

這就是傳說中的QML語言了,看上去有點像CSS,就像官網所說的,它是JavaScript的擴充套件。我們這裡先不對這些程式碼做什麼解釋,到後面會專門來講這個語言的。

6.我們這時執行程式,效果如下。

 Hosted by ImageHost.org

7.我們更換一下程式的面板。

在skin選單中選擇一個面板。

 Hosted by ImageHost.org

執行效果如下:

 Hosted by ImageHost.org

我們可以在其上右擊滑鼠,選擇Quit選單,退出程式。

8.關於停用Qt Quick。

我們開啟Help選單,進入About Plugins子選單。然後將Qt Quick項的對勾去掉即可。

 Hosted by ImageHost.org

到這裡,一個最簡單的Qt Quick程式就完成了。我們可以看到,這是一個全新的體驗,它與以前的Qt應用是完全不同的。在以後的教程裡我們會對Qt Quick及其包含的QML語言進行全面的講解