Qt:使用Qt Creator创建Qt Widget程序

本教程介绍如何使用Qt Creator创建一个小型Qt应用程序Text Finder。它是Qt UI工具文本查找器示例的简化版本。应用程序用户界面是使用UI设计器从Qt小部件构建的,应用逻辑使用代码编译器以C++方式编写
Qt:使用Qt Creator创建Qt Widget程序_第1张图片

创建文件查找器项目

  1. File > New File or Project > Application (Qt) > Qt Widgets Application > Choose
    Qt:使用Qt Creator创建Qt Widget程序_第2张图片

打开了Introduction and Project Location对话框

  • 在Name字段中,键入TextFinder
  • 在Create in字段中,选择项目文件的路径
    Qt:使用Qt Creator创建Qt Widget程序_第3张图片
  1. 选择Next,打开构建系统对话框
    Qt:使用Qt Creator创建Qt Widget程序_第4张图片
    然后选择用于构建和允许项目的构建系统:qmake,cmake,Qbs

  2. 选择Next类信息对话框打开
    Qt:使用Qt Creator创建Qt Widget程序_第5张图片

  • Class name字段中,将TextFinder作为类名称
  • Base name字段中,选择QWidget作为基础类类型

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

  1. 选择Next套件选择对话框打开
    Qt:使用Qt Creator创建Qt Widget程序_第6张图片
    为您的项目选择构建和允许套件

  2. 选择Next项目管理对话框打开
    Qt:使用Qt Creator创建Qt Widget程序_第7张图片

  3. 查看项目设置,然后选择完成来创建项目

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

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

  • main.cpp
  • textfinder.h
  • textfinder.cpp
  • textfinder.ui
  • textfinder.pro
    Qt:使用Qt Creator创建Qt Widget程序_第8张图片

填写缺失部分

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

设计用户界面

Qt:使用Qt Creator创建Qt Widget程序_第9张图片

  1. Editor模式下,双击项目视图中的textfinder.ui以启动集成的Qt 设计器
  2. 将以下小部件拖放到窗体中
  • Label (QLabel)
  • Line Edit (QLineEdit)
  • Push Button (QPushButton)
    Qt:使用Qt Creator创建Qt Widget程序_第10张图片
    注意:要轻松定位小部件,请使用侧边栏顶部的搜索框。例如,要查找"Label"小部件,则开始键入"lab"一词。
    Qt:使用Qt Creator创建Qt Widget程序_第11张图片
  1. 双击Label小部件并输入文件 keyword

  2. 双击Push Button小部件然后输入文本 Find

  3. 在**属性(Properties)**视图,更改对象名以查找按钮
    Qt:使用Qt Creator创建Qt Widget程序_第12张图片

  4. 按Ctrl+A(或Cmd+A)选择小部件,并选择水平布局(或在 Linux 或 Windows 上按Ctrl+H,或在 macOS 上按 Ctrl+Shift+H),应用水平布局(QHBoxLayout)。
    Qt:使用Qt Creator创建Qt Widget程序_第13张图片

  5. Text Edit小部件(QTextEdit)拖放到表单中。

  6. 选择屏幕区域,然后选择“垂直布局”(或按Ctrl+L)以应用垂直布局(QVBoxLayout)
    Qt:使用Qt Creator创建Qt Widget程序_第14张图片
    应用水平布局和垂直布局可确保应用 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手册。

完成头文件

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);
}
  • 要使用QFileQTextStream,请在textfinder.cpp中添加下面的#include
#include 
#include 
  • 对于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.
    Qt:使用Qt Creator创建Qt Widget程序_第15张图片

  • 打开了一个”文章位置“对话框

    • 在Name字段,输入textfinder
    • 在Path字段,输入”C:\Qt\examples\TextFinder“
      Qt:使用Qt Creator创建Qt Widget程序_第16张图片
  • 选择下一步,打开了一个**项目管理(Project Management)**对话

    • 添加到项目(Add to project)字段中,选择TextFinder.pro并选择Finish以打开代码编辑器中的文件
      Qt:使用Qt Creator创建Qt Widget程序_第17张图片
  • 选择Add > Add Prefix
    • Prefix字段中,将默认前缀替换为’/’
  • 选择Add > Add Files,定位&添加input.txt
    Qt:使用Qt Creator创建Qt Widget程序_第18张图片

编译和运行你的文件

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

你可能感兴趣的:(C++,qt)