C++ Qt 開発: PushButton ボタン コンポーネント

Qt は、クロスプラットフォームの C++ グラフィカル インターフェイス開発ライブラリです。Qt を使用すると、クロスプラットフォーム フォーム アプリケーションを迅速に開発できます。Qt では、さまざまなコンポーネントを指定された場所にドラッグ アンド ドロップして、グラフィカルな実装を実現できます。大幅な開発この章では、QPushButtonボタン コンポーネントの一般的な方法と柔軟な適用に焦点を当てます。

QPushButton は、Qt フレームワークでボタンを作成するために使用されるコンポーネント クラスであり、QWidget のサブクラスです。ボタンはユーザー インターフェイスで最も一般的なインタラクティブ要素の 1 つで、特定のアクションやイベントをトリガーするために使用されます。このコンポーネントには豊富なプロパティとメソッドがあり、さまざまなアプリケーション シナリオで柔軟に使用できます。

ここでは、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 がさまざまなインターフェース要件に適応できるようにします。テキスト、アイコン、状態の切り替え、クリックイベントの接続などの属性を設定することで、ボタンのさまざまなインタラクティブな効果を実現できます。

プッシュボタンを使用するには 2 つの方法があります。読者はグラフィカル インターフェイスに直接ドラッグ アンド ドロップするか、new QPushButton を通じて動的に作成することができます。

1.1 コードで作成する

まず、最初の純粋なコード方法で PushButton コンポーネントを使用します。リーダーは、インポート後に使用できる #include <QPushButton> クラスをインポートする必要があります。 a> 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 を通じて 2 つのボタンを作成し、ボタンの高さと幅、ボタンのサイズ、 connectボタンのタイトルなど、印刷機能を起動してトリガーする 2 つのイベントがボタンにバインドされています。読者はコードを実行して変更を観察できます。

1.2 グラフィカルインターフェイスの作成

グラフィカル インターフェイスによる作成は非常に簡単です。コントロールをドラッグ アンド ドロップするだけで、Qt がすべての作業を行ってくれます。ここでは、Qt での QSS コンポーネント ライブラリの使用に焦点を当てます。Qt スタイル シート (QSS) は、定義 Qt アプリケーションの外観とスタイリングのためのスタイルシート言語。 HTML や CSS のスタイル シートと同様に、QSS を使用すると、開発者はコントロールの色、フォント、境界線、背景などを含む単純なスタイル ルールを通じて Qt インターフェイスの外観を定義できます。

QSS を使用すると、開発者はアプリケーションの外観を簡単に変更して、さまざまなユーザー インターフェイス設計のニーズに適応させたり、アプリケーションのテーマに応じてカスタマイズしたりできます。

QSS は、コンポーネントに属性を直接追加することで実装できます。setStyleSheet 属性を使用すると、特定のコンポーネントに対して色付け操作を簡単に実行できます。最初に次のようにします。 a>pushButton は次のように黄色に設定できます。

//设置pushButton的背景颜色为黄色
ui->pushButton->setStyleSheet("background:yellow");

もちろん、ui-> を指定してthis-> に渡すと、現在のページ全体に適用されます。次のインターフェイスが実行されると、 、ページ全体が青に変わります。

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

コードを使用してスタイル シートを設定するだけでなく、より直観的なデザイン モードでインターフェイスに追加されたコンポーネントのスタイル シートを設定することもできます。まず、上で追加したコードをコメントアウトしてから、デザインモードに入ります。インターフェース上で右クリックし、ポップアップメニューから「スタイルシートの変更」を選択すると「スタイルシートの編集」ダイアログボックスが表示されるので、図のように次のコードを入力します。

は、この時点ですべての pushButton コンポーネントに対して有効になります。プログラムの実行中は、すべてのコンポーネントが青色に変わります。もちろん、ある時点で、次のことができるようになることを期待しています。たとえば、2 番目のボタンに色が付けられ、最初のボタンが変更されない場合、ルールは次によって制御する必要があります。

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

変更QPushButtonコンポーネント名、その後#その後ObjectNameオブジェクト名< a i=4 > の場合、次のルールを記述する必要があります。pushButton_2

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

この時点でプログラムを再度実行すると、以下に示すように、2 番目のボタンのみが青でマークされ、最初のボタンはデフォルトの色が維持されます。

もちろん、このような配色は通常は使用できません。読者がフロントエンドを学習している場合は、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;
}

は現時点で 3 つの状態を表示します。デフォルトで選択されていない場合、QPushButton はレンダリングに使用され、QPushButton:hover はレンダリングに使用されます。最後のQPushButton:pressedは、以下に示すように、押されたボタンのカラー レンダリングです。

次に、背景画像を Qt に追加し、QSS を使用して背景を PushButton

以下は、同じ背景画像を使用した通常状態の背景画像です。

以下はホバー状態の背景画像です:

以下は押された状態の背景画像です:

次のステップでは、これらの画像を Qt のリソースに追加します。プロジェクトのメイン ディレクトリを右クリックして Add New... ボタンを選択し、Qt 以下に示すように、Qt Resource File タブをクリックし、 Choose... ボタンをクリックします。

読者はリソースに自分で名前を付けることができます。ここではlyshark.qrcと呼びます。その後、Add Prefix ボタンをクリックして、新しいリソースを作成する必要があります。以下に示すように、プロジェクトのルート ディレクトリ a>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)}

上記のコードを実行すると、2 つのボタンがそれぞれ美化され、出力は次の図のようになります。

もちろん、このタイプのボタンの美化は、スタイル イメージをインポートすることなくQSS を使用して実現できます。背景としてアイコンを使用する場合と比較したこの方法の利点は、次のとおりです。背景デザインを必要とせず、画像やスタイルでフォントが設定されていない場合は、テキストやテキストのサイズ、位置、フォントなどの表示効果を自由に変更できます。