12.9 实例讲解

优质
小牛编辑
132浏览
2023-12-01

在本节中,我们以程序 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
QLineEditlineEdit
QPushButtonfindButton
QTextEdittextEdit
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 所示。