當(dāng)前位置：首頁 > 运维知识 > windows >内容正文

windows

C++ Qt开发：PushButton按钮组件

發(fā)布時間：2023/12/24 windows 71 coder

生活随笔收集整理的這篇文章主要介紹了 C++ Qt开发：PushButton按钮组件小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

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

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

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

方法	說明
`QPushButton(const QString &text, QWidget *parent = nullptr)`	構(gòu)造函數(shù)，創(chuàng)建一個帶有指定文本和父對象的按鈕。
`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()`	模擬按鈕點擊。
`void setFlat(bool flat)`	設(shè)置按鈕是否為平面按鈕。
`bool isFlat() const`	檢查按鈕是否為平面按鈕。
`void show()`	顯示按鈕。

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

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

1.1 代碼方式創(chuàng)建

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

#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)建一個按鈕
    // btn->show();                        // 用頂層方法彈出按鈕
    btn->setParent(this);                  // 設(shè)置父窗體(將btn內(nèi)嵌到主窗體中)
    btn->setText("退出");                   // 設(shè)置按鈕text顯示
    btn->move(100,20);                     // 移動按鈕位置
    btn->resize(100,50);                   // 設(shè)置按鈕大小
    btn->setEnabled(true);                 // 設(shè)置是否可被點擊

    // 創(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)建了兩個按鈕，并分別調(diào)整了按鈕的常規(guī)屬性包括按鈕的高度寬度以及按鈕的大小、按鈕標(biāo)題等，通過connect分別為按鈕綁定了兩個事件，以用于推出和觸發(fā)打印函數(shù)，讀者可自行運行代碼觀察變化；

1.2 圖形界面創(chuàng)建

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

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

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

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

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

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

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

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

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

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

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

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

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

/*按鈕普通態(tài)*/
QPushButton
{
    /*字體為微軟雅黑*/
    font-family:Microsoft Yahei;
    /*字體大小為20點*/
    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像素，讓按下時字向右移動3像素*/  
    padding-left:3px;
    /*上內(nèi)邊距為3像素，讓按下時字向下移動3像素*/  
    padding-top:3px;
}

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

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

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

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

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

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

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

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

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

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)}

運行上述代碼后將分別美化兩個按鈕，并輸出如下圖所示；

當(dāng)然，此類按鈕的美化完全可以使用QSS來實現(xiàn)并不需要導(dǎo)入樣式圖，這種方法比上面用圖標(biāo)作為背景的好處就是可以不需要設(shè)計背景圖，而且在樣式不設(shè)置字體的情況下，可以隨意更改文字以及文字的大小、位置、字體等顯示效果。

總結(jié)

以上是生活随笔為你收集整理的C++ Qt开发：PushButton按钮组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。