昨天我們初步介紹了信號槽機制。

今天我們會介紹兩個非常常用的圖形元件：「按鈕 Button」和「文字標籤 Label」以及它們的基本用法。

QPushButton 按鈕

Qt 提供的最基本款的按鈕就叫做 QPushButton。

這是 QPushButton 在 Windows 作業系統上的樣子：

典型的建立 QPushButton 的方式，相當簡單，就是 new 關鍵字創建物件，然後在建構子的第一個參數加上想要顯示的按鈕文字：

QPushButton* button = new QPushButton("我是按鈕");

QLabel 文字標籤

QLabel 則是基本的文字顯示元件。

建立 QLabel 的方式，也跟按鈕差不多，用 new 關鍵字創建物件，然後在建構子的參數寫上想標籤文字：

QLabel* label = new QLabel("<h1>我是標籤</h1>");

這邊有一點特別的就是標籤文字可以吃基本的 HTML 標籤，比如像上面這樣，我用了 <h1> 標籤把文字夾起來，文字就會變大而且是粗體。

亂數產生器

接下來我們就示範用 QPushButton + QLabel 寫一個亂數產生器。

這個亂入產生器上面會有一個數字還有一個按鈕。按下按鈕後，會隨機挑選 1~99 數字並且顯示在文字標籤上！(適合拿來班級抽籤)

如同昨天的專案，這個專案只會有一個專案檔 (.pro) 加上一個 CPP檔。

Qt 專案檔：

QT += core gui widgets  # 引入 Qt widgets 模組
TEMPLATE = app          # 這是一支應用程式
TARGET = RandomNumGen   # 執行檔名稱
SOURCES = d07.cpp       # 這支專案有一個 CPP

再來是 CPP 檔，我們先處理外觀顯示

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>
#include <QLabel>

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget w;

    // 這裡我們創建了兩個物件，QLabel 和 QPushButton 各一。
    QLabel* label = new QLabel("0");
    QPushButton* button = new QPushButton("我是按鈕");

    // 這裡用垂直排版，標籤放上面，按鈕放下面
    QVBoxLayout* layout = new QVBoxLayout;
    w.setLayout(layout);

    layout->addWidget(label);
    layout->addWidget(button);
    
    w.show();
    return app.exec();
}

到此為止，程式的外觀就完成了。

接下來我們為程式加上行為: 當按鈕按下去的時候，產生亂數並且設定文字標籤。

這裡我們就要用上 QObject::connect() 的信號槽機制了。其實呢，QObject::connect() 除了連接成員函數之外，也可以連接 C++11 的 lambda 函數。這次就用 lambda 函數來連結 QPushButton 的按鍵點擊事件：

QObject::connect(button, &QPushButton::clicked, [=]
    {
        // 按鈕的點擊事件(clicked)發生後，就執行這個 lambda!
        label->setText(QString::number(rand() % 100));
    });

在這個 lambda 函數裡面，我們產生範圍在 0-99 之間的隨機亂數，並透過 QPushButton::setText() 把數字顯示在按鈕上。QString::number() 是轉型函數，可以把 int 轉型成 QString 字串物件。

以下是完整程式碼：

#include <cstdlib>
#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QPushButton>
#include <QLabel>


int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    QWidget w;

    QVBoxLayout* layout = new QVBoxLayout;
    w.setLayout(layout);

    QLabel* label = new QLabel("<h1>0</h1>");
    QPushButton* button = new QPushButton("我是按鈕");

    layout->addWidget(label);
    layout->addWidget(button);

    QObject::connect(button, &QPushButton::clicked, [=]
    {
        // 按鈕的點擊事件(clicked)發生後，就執行這個 lambda!
        label->setText("<h1>" + QString::number(rand() % 100) + "</h1>");
    });
    w.show();
    return app.exec();
}

玩玩看這個亂數產生器吧！