Qtのコントロール - プッシュボタン

概要

Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。

プッシュボタンの角を丸くする

Qt Designer画面にて、プッシュボタンを配置する。

次に、Qt Designer画面にて、プッシュボタンのスタイルシートを設定する。
プッシュボタンの角を丸くするには、border-radiusプロパティにて、丸みの半径をpxで指定する。
(丸みの半径の値が大きいほど丸く、小さいほど角になる)

 /* プッシュボタンの前景色と背景色を指定する */
 QPushButton
 {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
 }

 /* 前景色、背景色、border-rariusを指定する */
 QPushButton
 {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
 }

プッシュボタンの背景色をグラデーションにする

QLinearGradientクラスを使用して、プッシュボタンの左上を(0, 0)、右下を(1, 1)として、
始点(x1, y1)および終点(x2, y2)を指定すると、始点から終点に向かってグラデーションとなる。

stopには、0～1の位置(実数)と、その位置における色を指定する。

以下の例では、8個のプッシュボタンをグラデーションにしている。

 MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow)
 {
    ui->setupUi(this);
 
   // 左上から右下(白->黒)
   ui->pushButton_1->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:0, y1:0, x2:1, y2:1,"
      "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
 
   // 上から下(白->黒)
   ui->pushButton_2->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:0, y1:0, x2:0, y2:1,"
      "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
 
   // 右上から左下(白->黒)
   ui->pushButton_3->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:1, y1:0, x2:0, y2:1,"
      "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
 
   // 右から左(白->黒)
   ui->pushButton_4->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:1, y1:0, x2:0, y2:0,"
      "stop:0 rgb(255, 255, 255), stop:1 rgb(0, 0, 0));"));
 
   // 右下から左上(白->黒->白)
   ui->pushButton_5->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:1, y1:1, x2:0, y2:0,"
      "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
 
   // 下から上(白->黒->白)
   ui->pushButton_6->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:0, y1:1, x2:0, y2:0,"
      "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
 
   // 左下から右上(白->黒->白)
   ui->pushButton_7->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:0, y1:1, x2:1, y2:0,"
      "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
 
   // 左から右(白->黒->白)
   ui->pushButton_8->setStyleSheet(QStringLiteral(
      "background-color: qlineargradient(x1:0, y1:0, x2:1, y2:0,"
      "stop:0 rgb(255, 255, 255), stop:0.5 rgb(0, 0, 0), stop:1 rgb(255, 255, 255));"));
 }