C++ Qt開發(fā)之PushButton按鈕組件的使用詳解

更新時(shí)間：2023年12月12日 08:19:35 作者：微軟技術(shù)分享

Qt 是一個(gè)跨平臺C++圖形界面開發(fā)庫,利用Qt可以快速開發(fā)跨平臺窗體應(yīng)用程序,本文將重點(diǎn)介紹QPushButton按鈕組件的常用方法及靈活運(yùn)用,感興趣的小伙伴可以學(xué)習(xí)一下

前言

Qt 是一個(gè)跨平臺C++圖形界面開發(fā)庫，利用Qt可以快速開發(fā)跨平臺窗體應(yīng)用程序，在Qt中我們可以通過拖拽的方式將不同組件放到指定的位置，實(shí)現(xiàn)圖形化開發(fā)極大的方便了開發(fā)效率，本章將重點(diǎn)介紹QPushButton按鈕組件的常用方法及靈活運(yùn)用。

QPushButton 是 Qt 框架中用于創(chuàng)建按鈕的組件類，是 QWidget 的子類。按鈕是用戶界面中最常見的交互元素之一，用于觸發(fā)特定的操作或事件。該組件具有豐富的屬性和方法，使其在不同的應(yīng)用場景中能夠靈活運(yùn)用。

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

方法	說明
QPushButton(const QString &text, QWidget *parent = nullptr)	構(gòu)造函數(shù)，創(chuàng)建一個(gè)帶有指定文本和父對象的按鈕。
void setText(const QString &text)	設(shè)置按鈕的文本。
QString text() const	獲取按鈕的文本。
void setIcon(const QIcon &icon)	設(shè)置按鈕的圖標(biāo)。
QIcon icon() const	獲取按鈕的圖標(biāo)。
void setCheckable(bool checkable)	設(shè)置按鈕是否可切換狀態(tài)。
bool isCheckable() const	檢查按鈕是否可切換狀態(tài)。
void setChecked(bool checked)	設(shè)置按鈕的切換狀態(tài)。
bool isChecked() const	獲取按鈕的當(dāng)前切換狀態(tài)。
void setEnabled(bool enabled)	啟用或禁用按鈕。
bool isEnabled() const	檢查按鈕是否啟用。
void setDefault(bool isDefault)	設(shè)置按鈕是否為默認(rèn)按鈕。
bool isDefault() const	檢查按鈕是否為默認(rèn)按鈕。
void click()	模擬按鈕點(diǎn)擊。
void setFlat(bool flat)	設(shè)置按鈕是否為平面按鈕。
bool isFlat() const	檢查按鈕是否為平面按鈕。
void show()	顯示按鈕。

這些方法提供了豐富的功能，使得 QPushButton 可以適應(yīng)不同的界面需求。通過設(shè)置文本、圖標(biāo)、切換狀態(tài)等屬性，以及連接點(diǎn)擊事件等，可以實(shí)現(xiàn)按鈕的各種交互效果。

PushButton 的使用有兩種方式，讀者可以直接在圖形界面上面拖拽來使用，也可以通過new QPushButton的方式動(dòng)態(tài)的創(chuàng)建生成。

代碼方式創(chuàng)建

首先我們以第一種純代碼的方式來使用PushButton組件，讀者需要導(dǎo)入#include <QPushButton>類，導(dǎo)入后可以使用new關(guān)鍵詞創(chuàng)建一個(gè)按鈕組件。

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

// 設(shè)置函數(shù),用于綁定事件
void Print()
{
    std::cout << "hello lyshark" << std::endl;
}

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

    // 創(chuàng)建[退出]按鈕
    QPushButton * btn = new QPushButton;   // 創(chuàng)建一個(gè)按鈕
    // btn->show();                        // 用頂層方法彈出按鈕
    btn->setParent(this);                  // 設(shè)置父窗體(將btn內(nèi)嵌到主窗體中)
    btn->setText("退出");                   // 設(shè)置按鈕text顯示
    btn->move(100,20);                     // 移動(dòng)按鈕位置
    btn->resize(100,50);                   // 設(shè)置按鈕大小
    btn->setEnabled(true);                 // 設(shè)置是否可被點(diǎn)擊

    // 創(chuàng)建[觸發(fā)信號]按鈕
    QPushButton * btn2 = new QPushButton("觸發(fā)信號",this);
    btn2->setParent(this);
    btn2->move(100,100);
    btn2->resize(100,50);

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

    // 設(shè)置主窗體特殊屬性
    // setWindowFlags(Qt::FramelessWindowHint | Qt::WindowStaysOnTopHint); // 隱藏標(biāo)題欄

    // 為按鈕綁定事件 connect(信號的發(fā)送者,發(fā)送的信號,信號的接受者,處理的函數(shù)(槽函數(shù)))
    connect(btn,&QPushButton::clicked,this,&QWidget::close);

    // 將窗體中的 [觸發(fā)信號] 按鈕,連接到Print函數(shù)中.
    connect(btn2,&QPushButton::clicked,this,&Print);

}

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

上述代碼中我們通過new QPushButton的方式創(chuàng)建了兩個(gè)按鈕，并分別調(diào)整了按鈕的常規(guī)屬性包括按鈕的高度寬度以及按鈕的大小、按鈕標(biāo)題等，通過connect分別為按鈕綁定了兩個(gè)事件，以用于推出和觸發(fā)打印函數(shù)，讀者可自行運(yùn)行代碼觀察變化；

圖形界面創(chuàng)建

通過圖形界面的創(chuàng)建很簡單，只需要拖拽控件Qt會幫我們做完所有的工作，這里我們就重點(diǎn)說說Qt中的QSS組件庫的使用，Qt Style Sheets（QSS）是一種用于定義Qt應(yīng)用程序外觀和樣式的樣式表語言。類似于HTML和CSS中的樣式表，QSS允許開發(fā)者通過簡單的樣式規(guī)則來定義Qt界面的外觀，包括控件的顏色、字體、邊框、背景等。

使用QSS，開發(fā)者可以很容易地改變應(yīng)用程序的外觀，使其適應(yīng)不同的用戶界面設(shè)計(jì)需求，或者根據(jù)應(yīng)用程序的主題進(jìn)行個(gè)性化定制。

QSS可以通過在組件上直接追加屬性的方式實(shí)現(xiàn)，通過使用setStyleSheet屬性可以很容易的對特定的組件進(jìn)行著色操作，如下我們將第一個(gè)pushButton設(shè)置為黃色可以這樣寫；

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

當(dāng)然了如果我們將ui->指定傳入this->則會對當(dāng)前整個(gè)頁面生效，當(dāng)如下界面被執(zhí)行時(shí)則整個(gè)頁面會變成藍(lán)色；

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

除了使用代碼來設(shè)置樣式表外，也可以在設(shè)計(jì)模式中為添加到界面上的部件設(shè)置樣式表，這樣更加直觀。先注釋掉上面添加的代碼，然后進(jìn)入設(shè)計(jì)模式。在界面上右擊，在彈出的菜單中選擇“改變樣式表”，這時(shí)會出現(xiàn)編輯樣式表對話框，在其中輸入如下代碼，如圖；

則此時(shí)將會針對所有的pushButton組件生效，當(dāng)程序運(yùn)行時(shí)所有的組件都見變?yōu)樗{(lán)色，當(dāng)然了在某些時(shí)候我們還是希望能對單獨(dú)的組件進(jìn)行控制，例如將第二個(gè)按鈕上色第一個(gè)保持不變，則此時(shí)需要將規(guī)則由；

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

更改為QPushButton組件名外加#緊隨其后的是ObjectName對象名pushButton_2，那么就要寫成如下規(guī)則；

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

此時(shí)再次運(yùn)行程序，則只有第二個(gè)按鈕被標(biāo)記為藍(lán)色，第一個(gè)按鈕將會保持默認(rèn)色，如下圖；

當(dāng)然這樣的配色顯然是無法正常使用的，如果讀者學(xué)過前端應(yīng)該知道使用CSS如何美化按鈕，QSS也支持CSS中的各種事件，我們以按鈕的普通狀態(tài)，按下抬起為例，將如下QSS設(shè)置到組件上。

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

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

/*按鈕按下態(tài)*/
QPushButton:pressed
{
    /*背景顏色*/  
    background-color:rgb(14 , 135 , 228);
    /*左內(nèi)邊距為3像素，讓按下時(shí)字向右移動(dòng)3像素*/  
    padding-left:3px;
    /*上內(nèi)邊距為3像素，讓按下時(shí)字向下移動(dòng)3像素*/  
    padding-top:3px;
}

此時(shí)會呈現(xiàn)三種狀態(tài)，當(dāng)默認(rèn)未被選中時(shí)會使用QPushButton來渲染，而QPushButton:hover則用于懸停時(shí)的顯示，最后的QPushButton:pressed則是被按下是的顏色渲染，如下所示；

接著我們來看一下如何添加背景圖片到Qt中并使用QSS將背景附加到PushButton上，首先分別準(zhǔn)備一些素材文件，這里提供三個(gè)不同的png圖片；

下面是普通態(tài)的背景圖，用了同一張背景圖：

下面是懸停態(tài)的背景圖：

下面是按下態(tài)的背景圖：

接著就是要把這些圖片添加到Qt中的資源中去，在項(xiàng)目主目錄上右鍵選中Add New...按鈕，并找到Qt下的Qt Resource File選項(xiàng)卡，并點(diǎn)擊Choose...按鈕，如下圖；

讀者可自行命名該資源名稱這里我就叫lyshark.qrc，接著就需要點(diǎn)擊Add Prefix按鈕，并在項(xiàng)目根目錄新建一個(gè)lyshark目錄并將所需文件拖拽到該目錄下，如下圖；

繼續(xù)點(diǎn)擊AddFiles按鈕依次選中資源并添加到項(xiàng)目源文件中，當(dāng)添加結(jié)束后按下Ctrl+S保存RC文件，即可看到如下圖所示；

樣式表設(shè)置背景圖可以使用setStyleSheet函數(shù)，在程序里設(shè)置按鈕的樣式表，具體程序如下所示：

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

    // 美化第一個(gè)按鈕
    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);}"
                );

    // 美化第二個(gè)按鈕
    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)}

運(yùn)行上述代碼后將分別美化兩個(gè)按鈕，并輸出如下圖所示；