Qt入門

本文將講述如何使用Qt建立自訂使用者界面，以及常見的Qt組件使用方式，信號與槽機制等。

這是一個簡單的範例，其建立了一個窗口，顯示一個文本與按鈕。

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

int main(int argc, char *argv[])
{
    // 初始化Qt程式，所有Qt程式都需要且只需要初始化一次QApplication對象
    QApplication app(argc, argv);

    // 一個基礎視窗
    QWidget window;

    // 佈局
    QVBoxLayout layout;

    // 標籤文本
    QLabel label("Hello, Qt!");
    // 按鈕
    QPushButton button("Click Me");

    // 定義點擊按鈕事件後的操作
    QObject::connect(&button, &QPushButton::clicked, [&]() {
        //更改標籤文本
        label.setText("Button Clicked!");
    });

    //將組件添加到佈局
    layout.addWidget(&label);
    layout.addWidget(&button);
    //設定視窗使用佈局
    window.setLayout(&layout);
    //顯示視窗，默認是隱藏的
    window.show();

    //進入事件迴圈
    return app.exec();
}

點擊按鈕

Qt常見組件

以下是Qt組件與常見使用方法範例

佈局

添加到佈局的組件會自動排列與設定位置

QH/VBoxLayout:橫縱向佈局
GridLayout: 網格佈局，多排行與列
FormLayout: 表單佈局，固定2列，用於創建文本與輸入框成對

QVBoxLayout layout;
layout.addWidget(&text); //添加組件到佈局
layout.addWidget(&button);

QWidget widget;
widget.setLayout(&layout); //將佈局設定到視窗

顯示組件

QWidget：大部分Gui組件的基底

QWidget widget;
widget.setFont(); //設定字體
widget.resize(400,300); //設定大小
widget.setLayout(); //設定佈局
widget.setStyleSheet("background-color: rgb(255,255,255);"); //設定css樣式
widget.hide(); //隱藏組件
widget.show(); //顯示組件

QFont：字體

QFont font;
font.setPointSize(12); //設定字號
font.setFamilies(""); //設定字體
font.setBold(true); //設定粗體

QLabel：文本

    QLabel text;
    text.setText("Text"); // 設定文本
    QString nowText = text.text();//取得目前文本
    text.setFont(); //設定字體

按鈕

QPushButton ：點擊按鈕

QPushButton button;
button.setText("Button"); //設定按鈕文本
button.setFont(); //設定字體
button.setCheckable(true); //設定是否可被點擊

QToolButton與其一致，僅默認大小樣式不同。

QRadioButton：選中按鈕

通常用於多選一場景，配合QButtonGroup使用

QButtonGroup buttonGroup;
QRadioButton Radio1;
QRadioButton Radio2;

buttonGroup.addButton(&Radio1);
buttonGroup.addButton(&Radio2);

QDialogButtonBox：對話按鈕選擇
其顯示一個適用與當前平臺的本地化對話選擇框，其可以選擇接受/拒絕或是幫助等。
其定義了一些常見的選項：

接受：OK、Save、Open、Yes、YesToAll...
拒絕：No、Abort、Close、Cancel、Discard...
其他：Help、Retry、Reset、Apply...

QDialogButtonBox dialogButton;
dialogButton.setStandardButtons(QDialogButtonBox::Cancel | QDialogButtonBox::Ok);

133112-png

QProgressBar：進度條

QProgressBar progressBar;
progressBar.setMaximum(100); //設定進度最大值
progressBar.setValue(10); //設定目前值
progressBar.setFormat("%v/%m"); //設定進度文本與格式 %v 目前值、 %m 最大值、%p 目前值百分比
progressBar.setTextVisible(true); //是否顯示文字

輸入組件

QComboBox：下拉式選單

QComboBox comboBox;
comboBox.addItem("選擇1");
comboBox.addItem("選擇2");

QLineEdit：輸入框

QLineEdit lineEdit;
lineEdit.setPlaceholderText("暱稱"); //設定提示文本
lineEdit.setText("Alice");
QString nowText = lineEdit.text(); //目前輸入框中的值

QSlider：滑動塊

QSlider slider;
slider.setOrientation(Qt::Horizontal); //設定滑塊方向
slider.setRange(0, 100); //設定值範圍
slider.setValue(10);
slider.value(); //取得目前值

Qt事件與信號槽機制

在Qt中，組件之間的交互通常透過信號和槽來實現。當用戶與組件進行交互（如點擊按鈕）時，會發出信號，並且可以將信號連接到一個槽（即一個處理函式），從而執行特定的操作。

在前面的範例中，我們透過連接函式QObject connect來連接按鈕的clicked信號與修改標籤文本的槽

QObject::connect(&button, &QPushButton::clicked, [&] {
    label.setText("Button Clicked!");
});

每當按鈕被點擊時，clicked信號會被發送，並執行信號相對應的槽函式。

自訂事件處理

除了信號和槽，Qt 也允許自訂事來處理特殊的需求。如，在視窗大小調整時也變更組件大小，或是在關閉視窗時存儲設定值等。

class CustomWidget : public QWidget
{
private:
    QPushButton * button;
    QLineEdit * lineEdit;

protected:
    void resizeEvent(QResizeEvent *event) override {
        button.resize(this->x() * 0.1 , this->y() * 0.1); //每次觸發視窗resize事件時，按鈕也將一同調整大小
    }
    void closeEvent(QCloseEvent *event) override {
        std::ofstream of("value.txt");
        lineEdit->text().toStdString() >> of;
    }
};

int main(){
    ...
    CustomWidget widget;
    widget.show();
    ...
}

有關更多組件的說明(如組件的信號與方法)可以參閱：

如何查詢Qt文檔

Qt文檔

大部分組件的文檔都包括以下內容：

Properties：組件的特性函式
Public Functions：組件可使用的函式
Reimplemented Public Functions：可自訂的函式
Signals：組件可用的信號
Reimplemented Protected Functions：通常是可自訂的事件函式