Qt：创建Qt Widget程序

秒速五厘米 2022-11-15 03:48 341阅读 0赞

本教程介绍如何使用Qt Creator创建一个小型Qt应用程序Text Finder。它是Qt UI工具[文本查找器][Link 1]示例的简化版本。应用程序用户界面是使用UI设计器从Qt小部件构建的，应用逻辑使用代码编译器以C++方式编写  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]

# 创建文件查找器项目 #

1.  File > New File or Project > Application (Qt) > Qt Widgets Application > Choose  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]

打开了**Introduction and Project Location**对话框

*  在Name字段中，键入**TextFinder**
 *  在Create in字段中，选择项目文件的路径  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]

1.  选择Next，打开**构建系统**对话框  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]  
    然后选择用于构建和允许项目的构建系统：`qmake，cmake，Qbs`
2.  选择**Next**，**类信息**对话框打开  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]

*  在**Class name**字段中，将**TextFinder**作为类名称
 *  在**Base name**字段中，选择[QWidget][]作为基础类类型

注意：会自动更新标题文件、源文件和窗体文件字段以匹配类的名称。

1.  选择**Next**，**套件选择**对话框打开  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]  
    为您的项目选择构建和允许套件
2.  选择**Next**，**项目管理**对话框打开  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 6]
3.  查看项目设置，然后选择**完成**来创建项目

注意：项目在**编辑**模式下打开，这些说明被隐藏起来。要返回到这些说明，请打开"**帮助**"模式。

文本查找器项目现在包含以下文件：

*  main.cpp
 *  textfinder.h
 *  textfinder.cpp
 *  textfinder.ui
 *  textfinder.pro  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 7]

# 填写缺失部分 #

首先设计用户界面，然后继续填写缺失的代码。最后，添加查找功能。

## 设计用户界面 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 8]

1.  在**Editor**模式下，双击**项目视图**中的textfinder.ui以启动集成的Qt 设计器
2.  将以下小部件拖放到窗体中

*  Label (QLabel)
 *  Line Edit (QLineEdit)
 *  Push Button (QPushButton)  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 9]  
    注意：要轻松定位小部件，请使用**侧边栏**顶部的搜索框。例如，要查找"Label"小部件，则开始键入"lab"一词。  
    ![在这里插入图片描述][20210403112245552.png]

1.  双击**Label**小部件并输入文件 **keyword**。
2.  双击**Push Button**小部件然后输入文本 **Find**
3.  在\*\*属性(Properties)\*\*视图，更改对象名以查找按钮  
    ![在这里插入图片描述][2021040311260682.png]
4.  按Ctrl+A（或Cmd+A）选择小部件，并选择**水平布局**（或在 Linux 或 Windows 上按Ctrl+H，或在 macOS 上按 Ctrl+Shift+H），应用水平布局（[QHBoxLayout][]）。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 10]
5.  将**Text Edit**小部件（QTextEdit）拖放到表单中。
6.  选择屏幕区域，然后选择“垂直布局”（或按Ctrl+L）以应用垂直布局（QVBoxLayout）  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 11]  
    应用水平布局和垂直布局可确保应用 UI 缩放到不同的屏幕尺寸。
7.  要在用户选择find按钮时调用find函数，可以使用Qt信号和插槽机制。当特定事件发生时，会发出信号，插槽是响应特定信号时调用的函数。Qt小部件有预定义的信号和插槽，您可以直接从Qt designer使用，要为查找功能添加插槽：  
    （1）右键单击**find**按钮以打开上下文菜单  
    （2）选择**Go to Slot > clicked()**，然后选择**ok**  
    一个私有插槽，on\_findButton\_clicked()被添加到头文件textfinde.h，一个私有函数，TextFinder::on\_findButton\_clicked()被
8.  按Ctrl+S （或Cmd+S）以保存您的更改。

有关使用Qt Designer设计Form的更多信息，请参阅[Qt Designer手册][Qt Designer]。

## 完成头文件 ##

textfinder.h文件已经包含必要的\#includes、构造函数、析构函数和Ui对象。您需要添加一个私有函数loadTextFile（），以读取和显示QTextEdit中输入文本文件的内容。

*  在"Edit"视图中的"Project"视图中，双击`textfind.h`文件以打开它进行编辑
 *  在`private`部分也就是`Ui::TextFinder` 后面添加一个私有函数，如下代码片段所示：

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

## 完成源文件 ##

现在头文件已经完成了，请转到源文件textfinder.cpp

*  在"Edit"视图中的"Project"视图中，双击`textfind.cpp`文件以打开它进行编辑
 *  添加代码，用`QFile`加载文本文件，用`QTextStream`读取它，然后使用`QTextEdit::setPlainText`在textEdit上显示它。下面的代码片段说明了这一点：

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`，请在`textfinder.cpp`中添加下面的\#include

#include <QFile>
    #include <QTextStream>

*  对于`on_findButton_clicked()`插槽，添加代码以提取搜索字符串，并使用`QTextEdit::find`函数在文本文件中查找搜索字符串。下面的代码片段说明了这一点：

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

在uic生成的`ui_textfinder.h`文件，通过下面代码行自动调用`on_findButton_clicked()`插槽

QMetaObject::connectSlotsByName(TextFinder);

## 创建资源文件 ##

您需要一个资源文件（.qrc），在其中嵌入输入文本文件。输入文件可以是任何带有一段文本的.txt文件。创建一个名为输入.txt并将其存储在textfinder文件夹中。

要添加资源文件：

*  选择**File > New File or Project > Qt > Qt Resource File > Choose.**  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 12]
 *  打开了一个”文章位置“对话框
    
     *  在Name字段，输入**textfinder**
     *  在Path字段，输入”C:\\Qt\\examples\\TextFinder“  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 13]
 *  选择下一步，打开了一个\*\*项目管理（Project Management）\*\*对话
    
     *  在**添加到项目(Add to project)字段中，选择TextFinder.pro**并选择**Finish**以打开代码编辑器中的文件  
        ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 14]

*  选择**Add > Add Prefix**
    
     *  在**Prefix**字段中，将默认前缀替换为’/’
 *  选择**Add > Add Files**，定位&添加`input.txt`  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 15]

# 编译和运行你的文件 #

现在，您拥有所有必要的文件，请选择按钮来编译和运行您的程序。

[Link 1]: http://doc.qt.io/qt-5/qtuitools-textfinder-example.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70]: /images/20221022/77fdf3492db64b7cba9d6f9ecbef9e29.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210403110908358.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210403110945487.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210403111103141.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/2021040311130624.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[QWidget]: http://doc.qt.io/qt-5/qwidget.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2021040311152718.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20210403111623617.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20210403111823221.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20210403111954452.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20210403112206881.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[20210403112245552.png]: https://img-blog.csdnimg.cn/20210403112245552.png
[2021040311260682.png]: https://img-blog.csdnimg.cn/2021040311260682.png
[QHBoxLayout]: http://doc.qt.io/qt-5/qhboxlayout.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20210403112722802.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20210403112910534.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[Qt Designer]: http://doc.qt.io/qt-5/qtdesigner-manual.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20210403115705987.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 13]: https://img-blog.csdnimg.cn/20210403115737943.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20210403115916791.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20210403120221957.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3poaXpoZW5nZ3Vhbg==,size_16,color_FFFFFF,t_70