## 12.9 實例講解 在本節中，我們以程序 textfinder 為例，向大家詳細講解使用 Qt Creator 創建應用程 序的全過程，我們將使用 Qt Creatro 創建工程和代碼，并使用 Qt Designer 創建用戶界面。 如果你對如何使用 Qt Designer 還不太熟悉的話，建議回頭看看前幾章。這個例子的運行效 果如圖 12-35 所示。  圖 12-35 程序運行效果 ### 12.9.1 程序運行內部機理 圖 12-36 是筆者畫的一個本程序的運行內部機理示意圖 ，從中可以清晰的看到各個組件 式是如何配合起來完成程序運行的。  圖 12-36 程序的內部機理 ### 12.9.2 設置環境 在前面我們已經講到，如果你是采用 SDK 安裝的 Qt4，那么正常情況下，安裝程序已經 自動為你設置好了所需的環境。如果你依次點擊菜單【Tools】→【Options...】→【Qt4】， 卻發現沒有找到任何正確的 Qt 版本，那么你需要自行設置 Path 環境變量，這個步驟與平臺 相關： + 在 Windows 和 Linux 下面：依次點擊菜單【Tools】→【Options...】→【Qt4】。 + 在 Mac OS X 上面：依次點擊菜單【Qt4】→【Preferences】。 小貼士：如果你使用 Visual Studio 編譯 Qt,再單獨安裝 Qt Creator，那么 Qt Creator 中 環境變量的設置與 Visual Studio 中將保持一致。 ### 12.9.3 創建并組織項目 接下來按照上一節所述的步驟創建項目并組織好項目文件。注意這里我們要選擇 QWidget 作為基類。在我們的項目中，應該包含如下文件： + textfinder.h + textfinder.cpp + main.cpp + textfinder.ui + textfinder.pro 其中，.h 和.cpp 文件包含了程序運行所必需的基本代碼，而 .pro 文件已經完成了。在接下來的步驟中，我們將使用 Qt Designer 設計界面，并添加完成功能所必須的代碼。 ### 12.9.4 設計用戶界面 在你的項目瀏覽器（Project Explorer）中雙擊 textfinder.ui ，將打開集成的 Qt Designer，在里面完成對用戶界面的設計，并依照表 12-6 列出的內容設置各個元素的屬性，完成后的情形如圖 12-37 所示。 表 12-6 界面元素屬性 | 窗口部件 | 名稱（objectName） | | --- | --- | | QLabel | 無 | | QLineEdit | lineEdit | | QPushButton | findButton | | QTextEdit | textEdit | | QGridLayout | 無 | | QVBoxLayout | 無 |  圖 12-37 界面布局 該界面元素的布局方式如下：Keyword 標簽和旁邊的 lineEdit 以及最右邊的 Find 按鈕 使用 QGridLayout 組合，再與下面的 textEdit 使用 QVBoxLayout 組合。 ### 12.9.5頭文件 接下來我們看看 textfinder.h 這個頭文件時怎樣寫的。由于我們的用戶界面只有一 個，所以決定采用單繼承的方式使用 .ui 文件，這就需要添加一個私有的成員變量： Ui::TextFinder *ui；我們需要添加一個私有的槽函數，以執行查找操作，它是 on_findButton_clicked()；我們還需要一個私有成員函數 loadTextFile()，用來讀取并顯 示我們在文本框中輸入的文本文件的內容。以下是頭文件中這部分的代碼： ``` private slots: void on_findButton_clicked(); private: Ui::TextFinder *ui; void loadTextFile(); ``` ### 12.9.6實現文件 現在我們看看如何書寫實現文件，這其中的關鍵是 loadTextFile()方法： ``` void TextFinder::loadTextFile() { QFile inputFile(":/input.txt"); inputFile.open(QIODevice::ReadOnly); QTextStream in(&inputFile); QString line = in.readAll(); inputFile.close(); ui->textEdit->setPlainText(line); QTextCursor cursor = ui->textEdit->textCursor(); cursor.movePosition(QTextCursor::Start, QTextCursor::MoveAnchor, 1); } ``` 在上面這段代碼中，我們首先使用一個 QFile 類的對象來加載文本文件，并使用 QTextStream 來讀取它的內容，最后使用 setPlainText()方法來顯示它。在實現文件開頭要 加入下面的頭文件聲明： ``` #include <QtCore/QFile> #include <QtCore/QTextStream> ``` 在 on_findButton_clicked()中，我們獲得了搜索的字符串并使用 find()方法在整個文本文 件中搜索該字符串，下面是實現代碼： ``` void TextFinder::on_findButton_clicked() { QString searchString = ui->lineEdit->text(); ui->textEdit->find(searchString, QTextDocument::FindWholeWords); } ``` 這之后，我們需要在類的構造函數中調用 loadTextFile()這個方法，注意它應放在 setupUi()方法的后面，切記！ ``` TextFinder::TextFinder(QWidget *parent) : QWidget(parent), ui(new Ui::TextFinder) { ui->setupUi(this); loadTextFile(); } ``` 由于我們對槽函數的命名方式符合“自動關聯”的規則，所以 on_findButton_clicked()槽 會被自動調用。我們在本書的前幾章講過，這是由于 uic 工具生成的 ui_textfinder.h 文件中加 入了下面這行代碼的緣故，這里再次提出以加深印象。 ``` QMetaObject::connectSlotsByName(TextFinder); ``` ### 12.9.7資源集文件 我們需要一個資源集文件（.qrc）來描述程序用到的資源，以前我們介紹的主要是如何 加入圖標、圖像文件，這次看看如何加入文本文件。其實方法是類似的，在項目瀏覽器（Project Explorer）中右鍵點擊項目，在上下文菜單中選擇【Add New ...】 →【Qt】→【Qt Resource File】，將彈出【New Resource file】對話框。  圖 12-38 New Resource file 對話框 如圖 12-38 所示，填入文件名字和路徑，然后點擊 Continue 按鈕,進入下一步。  圖 12-39 選擇工程并加入文件 如圖 12-39 所示，選中一個項目以加入資源集文件，這里是 textFinder，并確保選中【Add to Project】，然后點擊【Done】按鈕。 如圖 12-40 所示，你的資源集文件將被資源編輯器（ Resource Editor）打開并顯示出 來，首先點擊【Add】按鈕，在下拉項中選擇【Add Prefix】,這將添加一個斜線；接下來再 次點擊【Add】按鈕，這次選擇【Add File】,找到 input.txt 文件的位置并添加它。  圖 12-40 編輯資源集文件 ### 12.9.8 編譯運行程序 現在，所有必需的文件和準備工作都已完成，你可以按下 Ctrl+R 組合鍵或者點擊 圖標來編譯運行你的程序了，程序運行的效果大致如圖 12-35 所示。