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

編程示例

          使用Qt建立應用程序是十分簡單的。考慮到你的使用習慣，咱們編寫了兩套教程來實現兩個類似的應用程序，可是使用了

不一樣的方法。在開始以前，請確保你已經下載了QtSDK的商業版本或者開源版本，而且你也已經熟悉了Qt的開發工具。QtSDK

提供了QtCreator集成開發環境使得開發Qt的應用程序十分簡單。

用戶界面的選擇

        除了直觀上知道Qt是跨平臺的，提供了包括線程，網絡通訊以及視頻回放和網絡攝像頭等的跨平臺抽象外，Qt提供了兩種

獨立的方法建立用戶界面。

QtQuick模塊爲建立流暢的、活生生的用戶界面提供了一種標記語言。這種方式適合那些須要動畫元素的界面，以及應用程序

主要運行在小屏幕和多點觸控的設備上的場景。

QtWidgets模塊針對傳統桌面提供了更多的支持，和目標平臺作了更多的集成，不管目標平臺是MacOSX，Windows，KDE還會Gnome。它是一個很是高效的基於C++的類庫，包含了不少常見的用戶界面組件，你能夠很是容易的爲這些已存在的組件

擴展新的功能。

        你選擇那個模塊來建立用戶界面取決於你想建立怎樣的應用程序。其它的方法在餘下的Qt庫中都是同樣的，因此你能夠盡

可能的將應用程序中邏輯處理的代碼寫得更加獨立一些。當你熟悉了下面兩個示例，你能夠再作決定選擇哪個模塊來建立用

戶界面。對於更加詳細的信息，能夠查看用戶界面信息。

教程

這裏有兩個用於建立兩個類似應用程序的例子。一個是使用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。

 

實現一個菜單欄

         咱們的文本編輯程序須要使用菜單欄來顯示菜單。菜單欄將會切換到不一樣的菜單，而且用戶能夠選擇那些菜單能夠顯示。

菜單的切換意味着菜單須要更多的結構而不只僅是將它們成行的顯示出來。QML使用模型和視圖來組織數據以及顯示結構化的

數據。

使用數據模型和視圖

        QML有不一樣的數據視圖來顯示數據模型。咱們的菜單欄會將菜單以列表的方式顯示出來，也包含一個用於顯示菜單名的頭部。菜單列表是在VisualItemModel中聲明的。VisualItemModel元素包含那些已經具備視圖的元素，例如矩形以及導入的UI元素。其它的

模型類型，例如ListModel元素須要一個代理來顯示它的數據。

         咱們在menuListModel中聲明兩個可視化元素：FileMenu和EditMenu。我定製了這兩個菜單而且使用ListView來顯示它們。MenuBar.qml文件包含了QML聲明，一個簡單的編輯菜單定義在EditMenu.qml文件中：

         ListView元素將會依照代理來顯示模型。代理可能聲明模型元素以Row元素顯示，也可能以網格的方式顯示。咱們的menuListModel已經包含了可視化元素，所以，咱們不須要聲明代理。

 

         另外，ListView繼承自Flickable，使得列表能夠響應鼠標的拖拽以及其它的一些手勢。上面代碼的最後部分設置了Flickable

屬性用於建立咱們想要的滑動操做。特別是highlightMoveDuration屬性改變滑動轉換的週期。一個highlightMoveDuration使得菜單

間的切換更加緩慢。

        ListView經過一個索引(index)來維護模型元素，而且模型中的每個可視化元素均可以經過索引來獲取，索引的順序是根據

元素被聲明的順序定義的。改變currentIndex的值將會導ListView中高亮的元素改變。咱們菜單欄的頭部證實了這種效果。這裏有

兩個按鈕，點擊任何一個都會切換當前的菜單。當點擊fileButton的時候，菜單切換到FileMenu，而且索引變爲0，由於FileMenu在menuListModel中是最早聲明的，editButton相似。labelList矩形有一個取值爲1的z變量，這意味着它是在菜單欄的上

面顯示(空間座標系)。z值較大的元素始終在z值較小的元素的上面顯示。默認的z值是0。

 

目前建立的菜單欄僅僅具備菜單切換的效果，經過點擊頭部的兩個按鈕來進行切換：

 

構建文本編輯器

聲明一個文本區域(TextArea)

        若是咱們的文本編輯器不具備一個可編輯的區域，那麼他就不能被稱爲文本編輯器。QML的TextEdit元素容許聲明一個

多行編輯的文本區域。TextEdit元素和Text元素是有區別的，後者不容許用戶對文本進行編輯。

 

        上面設置了編輯器的前景色屬性和環繞文字的模式。TextEdit區域是包含在一個flickable的區域中的，這確保了當文字光標

了當前的顯示區域，那麼文本內容會自動滾動。函數ensureVisible()將會檢查鼠標是否處在可見區域的外面而且根據檢查的結果

移動滾動文本區域。QML使用JavaScript語法做爲其腳本，正如前面提到的，JavaScript能夠導入而且在QML中使用。

 

爲文本編輯器組裝組件

         咱們如今已經準備好了使用QML爲咱們的文本編輯器建立佈局。文本編輯器包含兩個組件，已經建立的菜單欄和文本區域。QML容許咱們重用這些組件，所以咱們能夠經過導入組件以及在必要的時候作一些定製來簡化咱們的代碼。咱們的文本

編輯器將窗口分爲兩個部分：屏幕的1/3用來顯示菜單欄，另外的2/3用來顯示文本區域。菜單欄在其餘的元素上面顯示(空間座標系)。

 

       經過導入可重用的組件，咱們的文本編輯器的代碼看起來更加簡單了。咱們能夠定製本身的主應用程序而沒必要擔憂那些已經

指定動做的屬性。使用這種方法，應用程序的佈局和UI組件能夠更加簡單的被建立。

 

裝飾文本編輯器

實現一個繪圖的接口

         咱們的文本編輯器看起來十分的簡單，所以咱們須要裝飾一下。使用QML，咱們能夠爲咱們的文本編輯器定義轉換和動畫。

咱們的菜單欄佔據1/3的屏幕，所以只在咱們須要的時候才顯示它這個功能將會十分有用。

        我添加了一個繪畫的接口，在咱們單擊的時候，該接口將會收起或者展開菜單欄。在咱們的實現中，咱們使用了一個十分小

的矩形用於鼠標點擊。繪畫接口和應用程序都有兩種狀態：繪畫接口是打開的和繪畫接口是關閉的。繪畫(drawer)元素是一個矩形，可是它的高度很小。這裏有一個內嵌在繪畫元素中間的Image元素，用於展現一個箭頭圖標。繪畫元素將會經過screen標籤賦予整個

應用程序一個狀態，不管用戶在何時點擊鼠標區域

 

          一個狀態僅僅是定義在State元素內部的一系列配置的集合。咱們能夠列舉一系列的狀態經過綁定到states屬性。在咱們的

應用程序中，兩種狀態分別被稱爲DRAWER_CLOSED和DRAWER_OPEN。元素的配置都是在PropertyChanges中聲明的。在DRAWER_OPEN狀態中，有四個元素將會被改變屬性。第一個目標,menubar將會改變本身的y屬性爲0。相似的textArea在DRAWER_OPEN狀態中將會下降到一個新的位置。

 

        狀態的轉變是突兀的而且是須要作平滑轉換的。在狀態之間的轉換是經過Transition元素定義的，定義好了以後能夠綁定到

元素的transitions屬性。咱們的文本編輯器有一個狀態轉換器。咱們的文本編輯器須要在DRAWER_OPEN和DRAWER_CLOSE

兩種狀態之間轉換。重要的是，轉換器須要一個from狀態和一個to狀態，咱們可使用*號通配符將該轉換器應用於全部的狀態

轉換。

         在狀態的轉換過程當中，咱們能夠爲屬性的變化指定動畫。咱們的menuBar位置在y:0到y:-partition以前轉換，咱們可使用NumberAnimation元素使得這個轉換過程更生動。咱們聲明瞭目標屬性將會動畫必定時間，而且使用特定的曲線。一個曲線

控制着動畫的轉換以及狀態轉換間的動做。咱們選擇的特定曲線是Easing.OutQuint，該曲線在接近終點的時候運動速度變慢。

能夠看看有關QML動畫的內容。

 

        另外一種方式實現屬性變化時候的動畫效果就是聲明一個Behavior元素。一個轉換器僅僅在狀態改變的時候工做，然而Behavior

能夠在通常屬性發生改變的時候工做。在文本編輯器中，當箭頭的旋轉屬性改變時，箭頭有一個NumberAnimation的動畫。

 

       回到咱們對於組件的狀態和動畫知識，咱們能夠提升咱們組件的表現力。在Button.qml中，在按鈕被單擊的時候，咱們能夠

添加顏色(color)和比例(scale)屬性改變。顏色的動畫使用的是ColorAnimation元素數量的動畫使用的是NumberAnimation。下面使

用的」onpropertyName」的語法形式對於目標是單個屬性而言是十分有幫助的。

 

         另外，咱們能夠經過使用顏色效果，例如：光柵效果等來加強QML組件的表現力。聲明一個Gradient元素將會覆蓋該元素的color屬性。你能夠在gradient中使用GradiendStop元素聲明一種顏色。梯度(gradient)屬性使用的是比例值，介於0.0和1.0之間。

 

        這個梯度值是被菜單欄使用的。最初的顏色是0.0，最後的則是1.0.

接下來怎麼作

        咱們已經完成了一個簡易的文本編輯器的界面。接下來咱們的UI界面已經完成，那麼咱們就可使用Qt和C++來完成程序的邏輯部分。QML最爲一個不錯的原型工具，將應用程序的邏輯部分和UI設計隔離開。

 

使用Qt Cpp擴展QML

如今，咱們已經有了文本編輯框的佈局，咱們如今就使用C++實現文本編輯框的功能部分。使用QML和C++容許咱們使用Qt建立

應用程序的邏輯部分。咱們可使用Qt的Quick類在C++應用程序中建立QML上下文，而且使用QQuickView顯示QML元素。可選的，咱們也能夠將C++代碼導出爲一個qmlscene工具能夠讀取的插件。在本示例中，咱們將會使用C++實現加載和保存文本的功能，而且將C++代碼導出爲一個插件。在這種方式下，咱們僅僅須要直接加載QML文件，而不是運行可執行程序。

導出C++類到QML

        咱們使用Qt和C++實現加載和保存文本的功能，經過註冊C++的類和方法均可以在QML中被調用。C++類須要被編譯爲Qt插

件，而且QML文件須要知道這個插件所處目錄。

對於咱們的文本編輯器程序來講，咱們須要建立以下的內容：

1. Directory類，該類用於處理與目錄相關的操做；

2. File類，該類繼承自QObject，列出一個目錄下的全部文件；

3. 插件類，該類將會註冊到QML上下文中；

4. Qt工程文件，使得這個Qt工程被編譯成插件；

5. 一個qmldir文件，用於告訴qmlscene工具插件類所處的目錄。

編譯Qt插件

        要編譯一個插件，咱們須要將下面的內容放置到Qt工程文件中。首先是必須添加到Qt工程文件中的源文件，頭文件以及Qt模塊。全部的C++代碼和工程文件都在filedialog目錄下：

 

        特別須要注意的是，咱們將qml模塊也鏈接到該工程中，而且配置爲插件模式，使用lib模板。咱們將編譯生成的插件放置在

上一層的plugins目錄下。

註冊一個類到QML中

 

       咱們須要使用Q_PLUGIN_METADATA宏來導出插件。注意，在咱們的dialogPlugin.h文件中，咱們將Q_OBJECT宏放置在咱們

類的最上面。由於咱們須要對工程文件運行qmake來產生必要的元對象代碼。

        咱們的插件類：DialogPlugin是QQmlExtensionPlugin的一個子類。咱們須要實現繼承的方法：registerTypes()。dialogPlugin.cpp文

件內容以下：

 

        registerTypes()方法將咱們的File和Directory類註冊到QML中。該方法須要類的名稱做爲它的模板，一個主版本號，一個次版本

號以及類名。

在C++類中建立QML屬性

        咱們可使用C++和Qt的元對象系統來建立QML元素和屬性。咱們可使用信號-槽機制實現屬性，使得Qt能夠識別這些屬性。而後，這些屬性就能夠在QML中使用了。

        針對咱們的文本編輯器應用，咱們須要加載和保存文本。典型地，這些特性須要包含一個文件對話框。幸運地是咱們可使用QDir、QFile和QTextStream來實現目錄的讀取以及輸入輸出流。

 

        Directory類使用了Qt的元對象系統來註冊一些屬性以便完成文件處理。Directory類將會被做爲一個插件導出，而且在QML中做爲Directory元素使用。每個使用Q_PROPERTY宏定義的屬性都是一個QML屬性。

       Q_PROPERTY定義一個讀和寫的屬性就比如是元對象系統中讀和寫函數同樣。例如：filename屬性，是QString類型，可以使用filename()方法讀取，使用setFilename()設置。另外，這裏有一個信號關聯到了filename屬性：filenameChanged()，當filename屬性

改變的時候就會發射這個信號。讀和寫函數在頭文件中是以public關鍵字聲明的。

         相似的，咱們也聲明瞭其它一些將會使用到的屬性。filesCount屬性表面一個目錄下的文件數。Filename屬性被設置爲當前選

中的文件的文件名，而且加載/保存文件的內容都存放在屬性fileContent中。

 

         Files列表屬性是在該目錄下過濾後剩下的文件列表。Directory類實現了過濾掉非法的文本文件，僅僅以」.txt」結尾的文件纔是

合法的。Qlists能夠經過在C++中聲明爲QQmlListProperty屬性在QML文件中使用。模板對象都須要繼承自QObject，所以File類也

須要從QObject集成。在Directory類中，File對象列表保存在一個名爲m_fileList的QList中。

 

     這些屬性能夠在QML中做爲Directory元素的屬性使用。須要注意的是，咱們不須要再C++代碼中建立一個表示標籤的」id」屬性。

 

        由於QML使用了JavaScript的語法和結構，所以咱們能夠在文件列表中迭代並獲取其屬性。要獲取第一個文件的名字屬性，

咱們可使用」files[0].name」。

        普通的C++函數也能夠在QML中使用。文件加載和保存函數使用C++代碼實現，而且使用Q_INVOKABLE宏聲明。可選的

是，咱們能夠將這些函數做爲槽函數聲明，而後這些函數也能夠在QML中使用。

 

         Directory類童謠須要在目錄內容發生改變的時候通知其它的對象。這個特性可使用信號實現。在前面已經提到過，QML

信號有一個以on開頭的信號處理器。這裏咱們將信號命名爲directoryChanged，在目錄被刷新的時候該信號被髮射。目錄刷新僅

僅是再次加載目錄內容，而且更新合法的文件列表。QML元素能夠經過鏈接到onDirectoryChanged信號處理上獲得目錄被改變

的通知。

        List屬性須要繼續被討論。這是由於list屬性使用回調函數訪問和修改list的內容。List屬性的類型是QQmlListProperty<File>。無

論在何時訪問列表，訪問器(accessorfunction)都應該返回一個QQmlListProperty<File>。模板類型File，須要繼承自QObject。因

此要構造QQmlListProperty屬性，咱們須要將列表的訪問器和修改器的函數指針做爲參數傳遞給構造器。一樣咱們須要一個指向

File列表的QList指針。

 

       構造器將指針傳遞給追加列表的函數，計算列表大小的函數，使用索引(index)獲取條目的函數以及清空列表的函數。至於追加

列表的函數是必須的。須要注意的是：函數指針必須和AppendFunction、CountFunction、AtFunction以及ClearFunction相匹配。

 

        爲了簡化文件對話框，Directory類實現了過濾掉非法的文本文件(不以」.txt」結尾的文件)。若是一個文件不是以」.txt」結尾，那麼

在它在文件對話框中就是不可見的。一樣，咱們的實現也確保了文件的保存是以」.txt」結尾的。Directory類使用QTextStream類讀取

文件並將數據寫到文件中的。

        使用咱們的Directory元素，咱們能夠將文件組織爲列表，咱們能夠知道目錄下有多少文件，能夠獲取文件的名稱和內容，而且

在目錄內容改變的時候獲得通知。

         要編譯這個插件，咱們須要在filedialog.pro文件上運行qmake命令，而後運行make命令來編譯並將插件拷貝到plugins目錄。

在QML中導入插件

        Qmlscene工具將與應用程序同一目錄下的文件直接導入。咱們也能夠經過建立一個qmldir文件，包含咱們須要導入的QML文件

的位置。Qmldir文件也能夠存儲插件以及其它資源的位置。

 

        咱們剛剛建立的插件是FileDialog，這是在工程文件的TARGET域指定的。編譯後的插件存放在plugins目錄下。

將FileDialog集成到FileMenu

        咱們的FileMenu須要顯示一個FileDialog元素，FileDialog元素包含了一個目錄下文件的列表，容許用戶經過在列表中點擊來選

擇文件。咱們一樣須要指定save,load,new三個按鈕來獲取這些動做。FileMenu包含了一個可編輯的文本輸入框，容許用戶經過鍵盤

輸入文件名。

        Directory元素在FileMenu.qml文件中被使用到，而且它通知FileDialog元素目錄的內容獲得了更新。這個通知是在信號處理者onDirectoryChanged中處理的。

 

        爲了繼續保持咱們的應用程序簡單，文件對話框將不會顯示任何非法文件。

 

        FileDialog元素將會經過讀取files列表屬性來展現目錄的內容。這些文件將會做爲GridView元素的模型，GridView將經過代理

將數據元素以網格的形式顯示出來。代理主要用於處理模型的顯示，咱們的文件對話框僅僅是建立文字處於中心的網格。點擊一

個文件名將會致使一個文件名高亮。當notifyRefresh信號被髮射，FileDialog對話框就會被通知從新加載目錄的內容。

 

        如今咱們的FileMenu能夠鏈接到相應的動做上。saveButton將會把TextEdit上的文本轉化爲目錄的fileContent屬性，而後從文本

輸入框中獲取文件的名稱，該按鈕會調用saveFile()函數保存文件。loadButton以相似的過程執行。New按鈕將會清空TextEdit的內容。

        EditMenu下的按鈕會將copy,paste和selectall這些函數與TextEdit鏈接起來。

 

 完成文本編輯器

 

        該應用程序是一個簡單的文本編輯器，能夠加載和保存文件，並執行簡單的操做：剪切、複製以及全選等功能。

運行文本編輯器

        在運行文本編輯器以前，咱們須要將C++代碼編譯爲插件。要編譯C++代碼，咱們進入filedialog目錄，運行qmake命令，而後

使用make或者nmake編譯，這取決於你的平臺。接着運行qmlscene打開texteditor.qml文件便可。

       源代碼在examples/tutorials/gettingStartedQml目錄下。