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 的其他示例和文件。