QtCreator 和 QtDesigner 的基本应用程序

QtCreator 目前是创建 Qt 应用程序的最佳工具。在这个例子中，我们将看到如何创建一个管理按钮和编写文本的简单 Qt 应用程序。

要创建新应用程序，请单击文件 - >新文件或项目：

然后选择 Projects-> Application-> Qt Widgets Application

然后，你可以选择项目的名称和路径：

接下来，你可以选择要使用的套件。如果你没有任何套件，QtCreator 将使用你的 Qt 版本和你计算机的主编译器创建一个套件。如果你没有任何编译器，则可以安装一个。在 Windows 上：安装 Visual Studio。在 Linux / Mac 上：安装 g ++或 clang ++。

然后，你可以选择主窗口类的名称，继承的类，与主窗口类对应的文件的名称。如果你正在学习或测试 Qt，你实际上并不需要更改它们。

最后一步可以是选择该项目的子项目并添加版本控制，如 git 和 svn。如果它仅用于测试，则不需要更改它们。

然后单击完成按钮。现在你应该在这里：

这是你的应用程序的基础。如果现在通过单击 Build-> Run 或 ctrl + R（默认情况下）运行它，你将看到一个空窗口。

现在我们将添加一个文本和一个按钮。要做到这一点，我们将使用 Qt Designer。双击 mainwindow.ui 所以现在你应该看到:(如果没有，你会看到一些 xml 文件，点击左边的 Design 按钮）

在这里 Qt 设计师！ 看起来很复杂。但是一旦你习惯它，它真的很棒。我们将添加一些文本和一个按钮。在左侧，有项目列表。你可以单击一个并拖放对象。单击按钮并将其放在窗口中。然后搜索 Label，并执行相同的操作（左上角有一个过滤器，你可以在其中编写你要查找的对象）。

你现在应该有类似的东西：

通过双击对象，你可以更改它们上的文本。或者，你可以在右下角看到你现在所在对象的属性，并找到 text 属性。你还可以在此处更改名称。

现在，如果你保存并运行（更好地单击编辑按钮然后再次保存以确保你的修改已保存），你将得到：

咦？为什么我的标签和按钮就像我跑的那样？这是因为我们的中心对象没有布局。顺便说一句，如果你调整主窗口的大小，你可以看到对象保持其位置。所以为了解决它，我们将添加一个布局。让我们说一个垂直布局。因此，从左侧的对象列表中拖放垂直布局。现在你应该看到：

浮动布局。

所以现在右键单击主窗口，除了标签和按钮之外的任何地方。c \单击布局 - >垂直布局。现在你应该看到你的对象在窗口中垂直对齐。所以现在在布局中移动（再次拖放）你的标签和按钮。现在你应该得到：

在你的设计师。如果你运行你的应用程序：

在这里，你可以使用标签和按钮查看你的应用程序。如果你调整窗口大小，标签和按钮也会调整大小。

但我们的按钮仍然无效。我们可以用两种不同的方式改变它。第一种是使用我们创建的方法连接按钮。我们可以使用方法名称 connect 来完成。那么让我们回到我们的代码并转到 mainwindow.cpp 现在添加：

connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));

在你的 MainWindow 的构造函数之后，ui->setupUI(this); 初始化 ui。

然后我们可以在 .cpp 类中创建 MainWindow :: whenButtonIsClicked()，它可以改变标签的文本：

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

在我们的 mainwindow.h 中，我们需要添加：

public slots:
    void whenButtonIsClicked();

公共时隙意味着可以在接收到信号时调用此方法。当我们点击按钮和一个方法来连接链接信号。

所以现在如果我们运行我们的应用程序并单击按钮，我们得到：

这意味着我们的连接正在运行。但是使用 Qt Designer，我们有一种更简单的方法。如果你想做另一种方式，删除连接以取消连接按钮（因为我们将以不同方式连接它），返回 mainwindow.ui 并右键单击按钮。单击 Go to slot …，选择 clicked() 并按 ok。

然后你应该转移到这个功能：

void MainWindow::on_pushButton_clicked()
{
}

这是单击按钮时将调用的函数。所以你可以添加

ui->label->setText("it's even easier !");

进去。转到 mainwindow.h 保存更改（当你转到插槽时，它会创建一个与你要求的信号相关联的方法。它在 .h 中定义函数但是不保存它。所以你应该去到文件并保存）。

现在，当你运行应用程序并按下按钮时，你可以看到新消息（如果你仍然看到旧消息，则表明你没有删除连接）。

我们也可以在我们的标签中添加一个 int，double 等，这要归功于 QVariant，这是一个很棒的类，它可以在很多其他东西中转换很多东西。所以左边添加一个 int，当我们按下按钮时会增加。

那么 .h：

#ifndef MAINWINDOW_H
#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

public slots:
    void whenButtonIsClicked();

private slots:
    void on_pushButton_clicked();

private:
    Ui::MainWindow  *ui;
    double          _smallCounter;
};

#endif // MAINWINDOW_H

.cpp：

#include "mainwindow.h"
#include "ui_mainwindow.h"

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
//    connect(ui->pushButton, SIGNAL(clicked(bool)), this, SLOT(whenButtonIsClicked()));
    _smallCounter = 0.0f;
}

MainWindow::~MainWindow()
{
    delete ui;
}

void MainWindow::whenButtonIsClicked()
{
    ui->label->setText("the button has been clicked !");
}

void MainWindow::on_pushButton_clicked()
{
    _smallCounter += 0.5f;
    ui->label->setText("it's even easier ! " + QVariant(_smallCounter).toString());
}

现在，我们可以再次保存并运行。每次单击按钮，它都会显示“它更容易！”，其值为_smallCounter。所以你应该有类似的东西：

本教程已完成。如果你想了解有关 Qt 的更多信息，让我们在 StackOverflow 文档或 Qt 文档中查看 Qt 的其他示例和文档。