C++ GUI Qt编程之路------创建一个基于Qt Widget的Text Finder应用程序

╰半橙微兮° 2022-03-15 11:44 234阅读 0赞

学习第一步：创建一个基于Qt Widget的Text Finder应用程序。

这个教程讲如何用Qt Creator创建一个小的Qt应用程序。最终展示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center]

**第一步：创建项目**

选择 File > New File or Project > Application > Qt Widgets Application > Choose  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 1]  
选择项目路径，注意路径一定要是全英文的，不能有汉字，否则项目无法编译  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 2]  
Kit选择，直接Next，如果只有一个Kit，这一步软件会跳过  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 3]  
修改Class Name为TextFinder  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 4]  
点击Finsh，项目创建完毕  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 5]  
**第二步：编写界面**

在编辑模式，双击打开项目的textfinder.ui文件，拖动下面三个小部件到表单中

*  Label (QLabel)
 *  Line Edit (QLineEdit)
 *  Push Button (QPushButton)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 6]

*  双击`Label`部件输入`Keyword`
 *  双击`Push Button`部件输入`Find`
 *  点击`Find` Button找到属性, 改变`objectName` 为 `findButton`  
    ![在这里插入图片描述][20190302161058972.png_pic_center]

然后全选小部件，点击Lay out Horizontally  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 7]  
拖动一个Text Edit小部件到表单中，全选并点击Lay out Vertically  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 8]  
右键点击Find按钮打开一个context-menu，选择Go to Slot > clicked()，然后选择OK，一个私有slot`on_findButton_clicked()`已经添加到头文件中，一个私有函数`TextFinder::on_findButton_clicked()` 已经添加到源文件textfinder.cpp中。

**第三步：完善头文件**  
在编辑模式双击打开textfinder.h头文件，在私有部分添加一个函数`void loadTextFile()`，如下：

private:
          Ui::TextFinder *ui;
          void loadTextFile();

**第四步：完善源文件**  
双击打开textfinder.cpp文件，在文件的最后添加如下的函数：

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);
      }

在文件的最前面添加如下的代码：

#include <QFile>
    #include <QTextStream>

在函数on\_findButton\_clicked()添加如下代码：

void TextFinder::on_findButton_clicked()
      {
          QString searchString = ui->lineEdit->text();
          ui->textEdit->find(searchString, QTextDocument::FindWholeWords);
      }

最后，在如下的函数中还要添加一行代码`loadTextFile()`，整体如下：

TextFinder::TextFinder(QWidget *parent)
          : QWidget(parent), ui(new Ui::TextFinder)
      {
          ui->setupUi(this);
          loadTextFile();
      }

**第五步：创建源文件**  
首先在你的项目目录下面创建一个名叫input.txt的文件，接下来选择File > New File or Project > Qt > Qt Resource File > Choose  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 9]  
选择地址要在上面的项目文件夹目录下，Name输入textfinder  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 10]  
选择刚才创建的项目名称  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 11]  
选择Add > Add Prefix，在Prefix处用 “/” 替换默认的路径，然后选择添加文件，选择input.txt。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 12]  
接下来你就可以编译并且执行你的程序了。

**注意：**  
如果你想把你编写的软件发布出来，在其他地方也能正常执行，你还需要将qt的一些文件路径加入环境变量中。我在我的环境变量中加入了如下两条（我的Qt是默认路径安装的）：

C:\Qt\Qt5.12.1\Tools\QtCreator\bin
    C:\Qt\Qt5.12.1\5.12.1\mingw73_64\bin

如果你的环境变量设置的和我的一样，那么你在编译的时候，构建套件（Kit）要选择`Desktop Qt 5.12.1 64-bit` 和 `release`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center]: /images/20220315/03f85ea261d043fd978b0e23d3978930.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220315/95d14a319a0548cf8cc5d6cd589658f1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20220315/9c0f88d1f43e48e0af6f7153fd0e5b9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20220315/77b8f2b1fba7410592ff99afec059dc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20220315/9256d273c2cc40a1bc39b75f8e26d2fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20220315/45f4d75213d041f88556afc5ea3fcae2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20220315/b6676ecf8a954c4b95d5f05615f9a3cb.png
[20190302161058972.png_pic_center]: /images/20220315/e2822684eeab4219b0ca10b2f91dd3a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20220315/56c84ad0260a4c119de5e177b58154a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 8]: /images/20220315/0ce6eb86d9cb4b5a880f81dbea06532c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 9]: /images/20220315/aa9255cb9c444c509525364d72af0652.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 10]: /images/20220315/d812777a484f49969fbbd7e0027adccd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 11]: /images/20220315/b368dc3936ea49d79112a6fcaaca17c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM4MTI4NjQ3_size_16_color_FFFFFF_t_70_pic_center 12]: /images/20220315/e2ad76a92d904a0790954bc949c557f9.png