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 所示。