C++ Qt開發：PushButton按鈕元件

微軟技術分享發表於2023-12-11
C++QT元件

Qt 是一個跨平臺C++圖形介面開發庫，利用Qt可以快速開發跨平臺窗體應用程式，在Qt中我們可以透過拖拽的方式將不同元件放到指定的位置，實現圖形化開發極大的方便了開發效率，本章將重點介紹QPushButton按鈕元件的常用方法及靈活運用。

QPushButton 是 Qt 框架中用於建立按鈕的元件類，是 QWidget 的子類。按鈕是使用者介面中最常見的互動元素之一，用於觸發特定的操作或事件。該元件具有豐富的屬性和方法，使其在不同的應用場景中能夠靈活運用。

以下是 QPushButton 類中常用的一些方法，包括說明和簡要概述：

方法 說明
QPushButton(const QString &text, QWidget *parent = nullptr) 建構函式，建立一個帶有指定文字和父物件的按鈕。
void setText(const QString &text) 設定按鈕的文字。
QString text() const 獲取按鈕的文字。
void setIcon(const QIcon &icon) 設定按鈕的圖示。
QIcon icon() const 獲取按鈕的圖示。
void setCheckable(bool checkable) 設定按鈕是否可切換狀態。
bool isCheckable() const 檢查按鈕是否可切換狀態。
void setChecked(bool checked) 設定按鈕的切換狀態。
bool isChecked() const 獲取按鈕的當前切換狀態。
void setEnabled(bool enabled) 啟用或禁用按鈕。
bool isEnabled() const 檢查按鈕是否啟用。
void setDefault(bool isDefault) 設定按鈕是否為預設按鈕。
bool isDefault() const 檢查按鈕是否為預設按鈕。
void click() 模擬按鈕點選。
void setFlat(bool flat) 設定按鈕是否為平面按鈕。
bool isFlat() const 檢查按鈕是否為平面按鈕。
void show() 顯示按鈕。

這些方法提供了豐富的功能，使得 QPushButton 可以適應不同的介面需求。透過設定文字、圖示、切換狀態等屬性，以及連線點選事件等，可以實現按鈕的各種互動效果。

PushButton 的使用有兩種方式，讀者可以直接在圖形介面上面拖拽來使用，也可以透過new QPushButton的方式動態的建立生成。

1.1 程式碼方式建立

首先我們以第一種純程式碼的方式來使用PushButton元件，讀者需要匯入#include <QPushButton>類，匯入後可以使用new關鍵詞建立一個按鈕元件。

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include <iostream>
#include <QPushButton>

// 設定函式,用於繫結事件
void Print()
{
    std::cout << "hello lyshark" << std::endl;
}

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 建立[退出]按鈕
    QPushButton * btn = new QPushButton;   // 建立一個按鈕
    // btn->show();                        // 用頂層方法彈出按鈕
    btn->setParent(this);                  // 設定父窗體(將btn內嵌到主窗體中)
    btn->setText("退出");                   // 設定按鈕text顯示
    btn->move(100,20);                     // 移動按鈕位置
    btn->resize(100,50);                   // 設定按鈕大小
    btn->setEnabled(true);                 // 設定是否可被點選

    // 建立[觸發訊號]按鈕
    QPushButton * btn2 = new QPushButton("觸發訊號",this);
    btn2->setParent(this);
    btn2->move(100,100);
    btn2->resize(100,50);

    // 設定主窗體常用屬性
    this->resize(300,200);              // 重置視窗大小,調整主視窗大小
    this->setWindowTitle("我的窗體");    // 重置主窗體的名字
    this->setFixedSize(300,200);        // 固定窗體大小(不讓其修改)
    // this->showFullScreen();          // 設定窗體全屏顯示

    // 設定主窗體特殊屬性
    // setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); // 隱藏標題欄

    // 為按鈕繫結事件 connect(訊號的傳送者,傳送的訊號,訊號的接受者,處理的函式(槽函式))
    connect(btn,&QPushButton::clicked,this,&QWidget::close);

    // 將窗體中的 [觸發訊號] 按鈕,連線到Print函式中.
    connect(btn2,&QPushButton::clicked,this,&Print);

}

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

上述程式碼中我們透過new QPushButton的方式建立了兩個按鈕，並分別調整了按鈕的常規屬性包括按鈕的高度寬度以及按鈕的大小、按鈕標題等，透過connect分別為按鈕繫結了兩個事件，以用於推出和觸發列印函式，讀者可自行執行程式碼觀察變化；

1.2 圖形介面建立

透過圖形介面的建立很簡單，只需要拖拽控制元件Qt會幫我們做完所有的工作，這裡我們就重點說說Qt中的QSS元件庫的使用，Qt Style Sheets（QSS）是一種用於定義Qt應用程式外觀和樣式的樣式表語言。類似於HTML和CSS中的樣式表，QSS允許開發者透過簡單的樣式規則來定義Qt介面的外觀，包括控制元件的顏色、字型、邊框、背景等。

使用QSS，開發者可以很容易地改變應用程式的外觀，使其適應不同的使用者介面設計需求，或者根據應用程式的主題進行個性化定製。

QSS可以透過在元件上直接追加屬性的方式實現，透過使用setStyleSheet屬性可以很容易的對特定的元件進行著色操作，如下我們將第一個pushButton設定為黃色可以這樣寫；

//設定pushButton的背景顏色為黃色
ui->pushButton->setStyleSheet("background:yellow");

當然瞭如果我們將ui->指定傳入this->則會對當前整個頁面生效，當如下介面被執行時則整個頁面會變成藍色；

this->setStyleSheet("background:blue");

除了使用程式碼來設定樣式表外，也可以在設計模式中為新增到介面上的部件設定樣式表，這樣更加直觀。先註釋掉上面新增的程式碼，然後進入設計模式。在介面上右擊，在彈出的選單中選擇“改變樣式表”，這時會出現編輯樣式表對話方塊，在其中輸入如下程式碼，如圖；

則此時將會針對所有的pushButton元件生效，當程式執行時所有的元件都見變為藍色，當然了在某些時候我們還是希望能對單獨的元件進行控制，例如將第二個按鈕上色第一個保持不變，則此時需要將規則由；

QPushButton{
	background-color: rgb(0, 0, 255);
}

更改為QPushButton元件名外加#緊隨其後的是ObjectName物件名pushButton_2，那麼就要寫成如下規則；

QPushButton#pushButton_2{
	background-color: rgb(0, 0, 255);
}

此時再次執行程式，則只有第二個按鈕被標記為藍色，第一個按鈕將會保持預設色，如下圖；

當然這樣的配色顯然是無法正常使用的，如果讀者學過前端應該知道使用CSS如何美化按鈕，QSS也支援CSS中的各種事件，我們以按鈕的普通狀態，按下抬起為例，將如下QSS設定到元件上。

/*按鈕普通態*/
QPushButton
{
    /*字型為微軟雅黑*/
    font-family:Microsoft Yahei;
    /*字型大小為20點*/
    font-size:20pt;
    /*字型顏色為白色*/    
    color:white;
    /*背景顏色*/  
    background-color:rgb(14 , 150 , 254);
    /*邊框圓角半徑為8畫素*/ 
    border-radius:8px;
}

/*按鈕停留態*/
QPushButton:hover
{
    /*背景顏色*/  
    background-color:rgb(44 , 137 , 255);
}

/*按鈕按下態*/
QPushButton:pressed
{
    /*背景顏色*/  
    background-color:rgb(14 , 135 , 228);
    /*左內邊距為3畫素，讓按下時字向右移動3畫素*/  
    padding-left:3px;
    /*上內邊距為3畫素，讓按下時字向下移動3畫素*/  
    padding-top:3px;
}

此時會呈現三種狀態，當預設未被選中時會使用QPushButton來渲染，而QPushButton:hover則用於懸停時的顯示，最後的QPushButton:pressed則是被按下是的顏色渲染，如下所示；

接著我們來看一下如何新增背景圖片到Qt中並使用QSS將背景附加到PushButton上，首先分別準備一些素材檔案，這裡提供三個不同的png圖片；

下面是普通態的背景圖，用了同一張背景圖：

下面是懸停態的背景圖：

下面是按下態的背景圖：

接著就是要把這些圖片新增到Qt中的資源中去，在專案主目錄上右鍵選中Add New...按鈕，並找到Qt下的Qt Resource File選項卡，並點選Choose...按鈕，如下圖；

讀者可自行命名該資源名稱這裡我就叫lyshark.qrc，接著就需要點選Add Prefix按鈕，並在專案根目錄新建一個lyshark目錄並將所需檔案拖拽到該目錄下，如下圖；

繼續點選AddFiles按鈕依次選中資源並新增到專案原始檔中，當新增結束後按下Ctrl+S儲存RC檔案，即可看到如下圖所示；

樣式表設定背景圖可以使用setStyleSheet函式，在程式裡設定按鈕的樣式表，具體程式如下所示：

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent)
    , ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    // 美化第一個按鈕
    ui->pushButton->setStyleSheet(
                "QPushButton{border-image: url(:/new/lyshark/Qt_threeStatus_ok.png);}"
                "QPushButton:hover{border-image: url(:/new/lyshark/Qt_threeStatus_ok1.png);}"
                "QPushButton:pressed{border-image: url(:/new/lyshark/Qt_threeStatus_OK2.png);}"
                );

    // 美化第二個按鈕
    ui->pushButton2->setStyleSheet(
                "QPushButton{border-image: url(:/new/lyshark/Qt_threeStatus_ok.png);}"
                "QPushButton:hover{border-image: url(:/new/lyshark/Qt_threeStatus_ok1.png);}"
                "QPushButton:pressed{border-image: url(:/new/lyshark/Qt_threeStatus_OK2.png);}"
                );
}

也可以在 QtDesigner 上，即ui檔案上的按鈕處編輯樣式表，如下所示：

QPushButton{border-image: url(:/new/lyshark/Qt_threeStatus_ok.png)}
QPushButton:hover{border-image: url(:/new/lyshark/Qt_threeStatus_ok1.png)}
QPushButton:pressed{border-image: url(:/new/lyshark/Qt_threeStatus_OK2.png)}

執行上述程式碼後將分別美化兩個按鈕，並輸出如下圖所示；

當然，此類按鈕的美化完全可以使用QSS來實現並不需要匯入樣式圖，這種方法比上面用圖示作為背景的好處就是可以不需要設計背景圖，而且在樣式不設定字型的情況下，可以隨意更改文字以及文字的大小、位置、字型等顯示效果。

相關文章