Qt 5入門指南之Qt Quick編程示例

使用Qt創建應用程序是十分簡單的。考慮到你的使用習慣，我們編寫了兩套教程來實現兩個相似的應用程序，但是使用了不同的方法。在開始之前，請確保你已經下載了QtSDK的商業版本或者開源版本，並且你也已經熟悉了Qt的開發工具。QtSDK提供了QtCreator集成開發環境使得開發Qt的應用程序十分簡單。

用戶界面的選擇

除了直觀上知道Qt是跨平台的，提供了包括線程，網絡通信以及視頻回放和網絡攝像頭等的跨平台抽象外，Qt提供了兩種獨立的方法創建用戶界面。

QtQuick模塊為創建流暢的、活生生的用戶界面提供了一種標記語言。這種方式適合那些需要動畫元素的界面，以及應用程序主要運行在小屏幕和多點觸控的設備上的場景。

QtWidgets模塊針對傳統桌面提供了更多的支持，和目標平台做了更多的集成，無論目標平台是MacOSX，Windows，KDE還會Gnome。它是一個非常高效的基於C++的類庫，包含了很多常見的用戶界面組件，你可以非常容易的為這些已存在的組件擴展新的功能。

你選擇那個模塊來創建用戶界面取決於你想創建怎樣的應用程序。其它的方法在余下的Qt庫中都是一樣的，所以你可以盡可能的將應用程序中邏輯處理的代碼寫得更加獨立一些。當你熟悉了下面兩個示例，你可以再做決定選擇哪一個模塊來創建用戶界面。對於更加詳細的信息，可以查看用戶界面信息。

Ubuntu 環境下Gtk與QT編譯環境安裝與配置 http://www.linuxidc.com/Linux/2013-08/88539.htm

Linux系統下QT環境搭建 http://www.linuxidc.com/Linux/2013-07/87576.htm

Ubuntu下QT控制台程序無法運行的解決方案以及XTerm的配置方法 http://www.linuxidc.com/Linux/2013-06/86244.htm

Ubuntu 10.04下QT4.7.4移植詳解 http://www.linuxidc.com/Linux/2013-01/77930.htm

Ubuntu 14.04下安裝部署Qt5開發環境 http://www.linuxidc.com/Linux/2014-05/101774.htm

教程

這裡有兩個用於創建兩個相似應用程序的例子。一個是使用QtQuick創建用戶界面，而另一個則是使用QtWidgets來創建用戶界面。

 使用QtQuick開始編程

歡迎來到QML的世界。在這個示例中我們將會使用QML創建一個簡單的文本編輯器應用程序。在閱讀完這個指南之後，你應該可以使用QML和QtC++開發自己的應用程序。

QML構建用戶界面

本應用程序是一個簡單的文本編輯器，可以加載、保存和執行一些文本的操作。這個指南將會包含兩個部分。第一部分將會涉及到應用程序的布局以及使用QML語言。在第二部分，我們將會使用QtC++實現文本的加載和保存。使用Qt的元對象系統我們可以將C++的功能作為QML元素的屬性使用。使用QML和QtC++，我們可以將界面邏輯和應用程序邏輯分離開。

最終的源代碼在examples/tutorials/gettingStartedQml目錄。你也許需要先編譯examples/tutprials/gettingStartedQml/filedialog目錄下的C++插件。這一步會將C++插件放在QML能夠找到的目錄下。要啟動這個應用程序，僅僅需要使用qmlscene工具，將QML作為參數傳遞給這個工具。C++的部分假設了閱讀者已經掌握了基本的Qt編譯過程。

教程章節：

1. 定義按鈕和菜單

2. 實現菜單欄

3. 編譯文本編輯器

4. 裝飾文本編輯器

5. 使用QtC++擴展QML

定義一個按鈕和菜單

基本組件——按鈕

我們以構建一個按鈕開始我們的文本編輯器。在功能上，按鈕有一個鼠標敏感區域和一個標簽。當用戶點擊按鈕的時候，按鈕執行一個動作。

在QML中，最基本的可視化單元就是矩形(Rectangle)元素。矩形元素具有控制元素外觀和位置的屬性。

首先，導入QtQuick2.0允許qmlscene工具加載QML元素以便稍後使用。這一行代碼在所有的QML文件中都存在。需要注意的是，我們導入Qt的模塊的時候也導入了版本號。

這個簡單的矩形有一個唯一的標簽”simplebutton”，這就是id屬性。矩形元素的屬性是通過依次羅列屬性，中間以分號間隔，然後就是屬性的值。在示例代碼中，”grey”顏色就綁定到了矩形的顏色屬性。類似地，我們也綁定了該矩形的高度和寬度。

Text元素是一個不可編輯的文本區域。我們給這個文本框命名為”buttonlabel”。我們通過將值綁定到”text”屬性來設置該文本框的文字。這個文本框在矩形的中間，我們將文本框的”anchors”設置為其父親，也就是前面提到的simplebutton。Anchors也可以綁定到其它元素的anchors，使得布局更加的簡單。

我們將這些代碼保存為SimpleButton.qml。使用這個文件的文件名作為參數調用qmlscene工具，將會出現如下的效果：

要實現按鈕的功能，我們可以使用QML的事件處理機制。QML的事件處理機制和Qt的信號-槽機制十分類似。信號被發射

然後關聯的槽函數被調用。

在我們的simplebutton矩形中，我們包含了一個MouseArea元素。MouseArea元素描述了可交互的區域，也就是鼠標的移動會被檢測的區域。在這個例子中，我們將MouseArea的anchor設置為它的父親，也就是前面提到的simplebutton。Anchors.fill是獲取指定屬性的一種語法表達方式。fill是屬性簇anchors中的一個特定屬性。QML使用了基於anchor的布局，元素可以anchor其它的元素，創建健壯的布局。

當鼠標在MouseArea區域中移動時MouseArea有許多事件處理者。其中的一個事件處理者就是onClicked，該事件處理會在允許鼠標點擊的區域中點擊鼠標時候被調用，默認是左鍵單擊。我們可以將一個動作綁定到onClicked處理句柄。在我們的示例中，當鼠標點擊時，console.log()輸出文本。Console.log()函數是一個有用的調試輸出函數。

如下的代碼足夠完成顯示按鈕且在鼠標單擊的時候輸出文本。

一個功能齊全的按鈕在Button.qml中。示例代碼中有部分被省略了，因為這些代碼要麼在之前介紹過了，要麼就是與本章介紹的內容不是很相關。

我們可以使用屬性類型名稱的語法來自定義屬性。在示例代碼中，buttonColor屬性就是自定義的並且被賦值為”lightblue”。buttonColor在後面就被使用到了，用來根據不同操作填充不同的顏色。值得注意的是，屬性的賦值使用的是”=”，而屬性的值綁定使用的則是”:”。自定義的屬性使得內部元素的可見范圍可以超出矩形的范圍。QML基本類型有int，string，real和variant。通過綁定onEntered和onExited信號處理到顏色上，當鼠標停留在按鈕之上，按鈕的邊框將會變為黃顏色，並且在鼠標離開按鈕的時候恢復為原來的顏色。

我們通過將signal關鍵字放在信號名稱之前，自定義了一個buttonClick()信號在Button.qml中，所有的信號的處理者都是自動被創建的，這是通過簡單在信號的名字前面加上”on”這個單詞。顯然，onButtonClick就是buttonClick的處理者。onButtonClick會被賦予一些動作。在我們的按鈕示例中，onClicked鼠標處理者將會簡單的調用onButtonClick，功能就是現實一個文本。

onButtonClick使得外部對象可以十分輕易的獲取按鈕的鼠標區域。例如：將設有許多的元素，這些元素擁有許多的MouseArea，那麼一個buttonClick信號可以在許多的MouseArea做出區分，使得分別處理幾個MouseArea更加簡單。

我們現在已經具備了基本的知識：在QML中實現基本元素並可以處理鼠標移動事件。我們在一個巨型中創建一個文本框，自定義了屬性，針對鼠標移動實現了相應的處理。在元素中創建元素的思想貫穿著整個示例。

現在該按鈕還沒有什麼用，除非他作為組件可以執行一些動作。在下面一節，我們將會快速的創建一個菜單，包含幾個這樣的按鈕。

創建一個菜單頁 

在這一階段，我們將會介紹如何在一個單獨的QML文件中創建元素並指定動作。在這一節，我們將會介紹如何導入QML元素以及如何使用已經存在的組件構建新的組件。

菜單顯示了一個列表內容，每一個元素都用執行一個特殊動作的功能。在QML中，我們可以使用幾種方式創建菜單。首先我們會創建一個包含按鈕的菜單，每一個按鈕執行不同的動作。菜單的代碼在文件FileMenu.qml中。

上面的語法展示了如何導入關鍵字。這裡需要使用JavaScript文件，或者使用不在同一目錄下的QML文件。因為Button.qml文件和FileMenu.qml文件在同一個目錄下，因此我們無需導入Button.qml文件就可以使用它。我們可以直接通過聲明Button()創建按鈕，類似Rectangle的聲明。

在FileMenu.qml文件中聲明了三個Button元素。它們都聲明在一個Row元素內。該元素將其子元素水平放置。Button是在Button.qml文件中聲明的，這種用法和上一節的用法一致。在新創建的button中，我們可以將其屬性綁定為新值，覆蓋它們在Button.qml中綁定的默認值。exitButton按鈕在被按下的時候整個應用程序就會退出。值得注意的是：在Button.qml中定義的信號onButtonClick將會在FileMenu.qml中被調用，除了exitButton的onButtonClick事件處理者。

Row是在一個Rectangle中聲明的，創建了一個用於防止按鈕的矩形容器。這個矩形創建了一個間接的方式用於組織在一個菜單中的按鈕行。編輯菜單的聲明和之前菜單聲明十分類似。菜單中的按鈕的標簽為：Copy，Paste和SelectAll。

更多詳情見請繼續閱讀下一頁的精彩內容： http://www.linuxidc.com/Linux/2014-11/109829p2.htm