Qtのコントロール - プッシュボタンのソースを表示

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

== プッシュボタンの角を丸くする ==
Qt Designer画面にて、プッシュボタンを配置する。<br>
<br>
次に、Qt Designer画面にて、プッシュボタンのスタイルシートを設定する。<br>
プッシュボタンの角を丸くするには、<code>border-radius</code>プロパティにて、丸みの半径をpxで指定する。<br>
(丸みの半径の値が大きいほど丸く、小さいほど角になる)<br>
 <syntaxhighlight lang="css">
 /* プッシュボタンの前景色と背景色を指定する */
 QPushButton
 {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
 }
 </syntaxhighlight>
<br>
 <syntaxhighlight lang="css">
 /* 前景色、背景色、border-rariusを指定する */
 QPushButton
 {
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
    border-radius: 10px;
 }
 </syntaxhighlight>
<br><br>

== プッシュボタンの背景色をグラデーションにする ==
<code>QLinearGradient</code>クラスを使用して、プッシュボタンの左上を<code>(0, 0)</code>、右下を<code>(1, 1)</code>として、<br>
始点<code>(x1, y1)</code>および終点<code>(x2, y2)</code>を指定すると、始点から終点に向かってグラデーションとなる。<br>
<br>
<code>stop</code>には、0～1の位置(実数)と、その位置における色を指定する。<br>
<br>
以下の例では、8個のプッシュボタンをグラデーションにしている。<br>
 <syntaxhighlight lang="c++">
 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));"));
 }
 </syntaxhighlight>
<br><br>

== トグルボタンの作成 ==
まず、Qt Designer画面にて、プッシュボタンを配置して、<code>QPushButton</code>クラスの<code>checkable</code>プロパティにチェックを入力する。<br>
<br>
次に、配置したプッシュボタンを右クリックして[スロットへ移動]を選択する。<br>
プッシュボタンのシグナルにおいて、<code>clicked(bool)</code>または<code>toggled(bool)</code>を選択する選択して、スロット関数を作成する。<br>
<br>
プッシュボタンの押下において、<code>clicked(bool)</code>シグナルも<code>toggled(bool)</code>シグナルも同じように呼び出されるが、<br>
<u>ただし、以下のように、ソースコードから操作する場合は、差異がある。</u><br>
* ui->pushButton->setChecked(true);
*: <code>toggled(bool)</code>は呼び出されるが、<code>clicked(bool)</code>は呼び出されない。
*: <br>
*: 例えば、親ボタン1と子ボタン1-1、1-2、1-3がある時、
*: "親ボタンを押下すると、子ボタンを全て押下状態にする"
*: "親ボタンが押下されていない状態で、子ボタンが全て押下されると、親ボタンも押下状態にする"
*: ような場合の2で、親ボタンの押下状態だけを変える場合等。
<br>
* ui->pushButton->click();
*: <code>toggled(bool)</code>も<code>clicked(bool)</code>も呼び出される。(UI操作でボタンを押下したのと同様)
<br><br>

== 画像の表示 ==
==== プッシュボタンの画像 ====
プッシュボタンは、画像とテキストが表示できる。<br>
<br>
画像の位置は固定、画像のサイズは指定可能であり、テキストの左側に表示される。<br>
プッシュボタンコントロールのサイズを変更しても、画像のサイズは自動的に変化しない。<br>
<br>
画像のサイズを指定しない場合は、原画像のサイズで表示される。<br>
 <syntaxhighlight lang="c++">
 std::unique_ptr<QPushButton> pBtn = std::make_unique<QPushButton>();
 
 pBtn->setIcon(style()->standardIcon(QStyle::SP_ArrowDown));
 pBtn->setText(tr("Test"));
 pBtn->setIconSize(QSize(32, 32));
 pBtn->setFont(QFont("Meiryo", 18));
 </syntaxhighlight>
<br>
==== フレーム画像 ====
背景画像ではなく境界画像を指定する場合、サイズ変更に対応した枠を表示できる。<br>
 <syntaxhighlight lang="c++">
 std::unique_ptr<QPushButton> pBtn = std::make_unique<QPushButton>();
 
 pBtn->setText(tr("Test"));
 pBtn->setStyleSheet(
                       "border-width:27px; padding:10px; color:red;"
                       "background-image:url(:/images/close-hover.gif); background-color:skyblue;"
                       "border-image:url(:/images/border.png) 27 repeat;");
 </syntaxhighlight>
<br>
下図左は、border.pngファイルである。<br>
黒い箇所が透過の場合、背景色と背景画像が見える。<br>
repeatを指定しない場合は、引き伸ばした画像に変換される。<br>
[[ファイル:Qt PushuButton 1.png|フレームなし|中央]]
<br>
原画像を9分割して組み合わせることにより、境界線の長さの変化に対応することができる。<br>
下図中央の緑の部分が、border-widthで指定した27pxの境界である。<br>
②④⑥⑧の画像は、タイプにしたがって引き伸ばしたり、タイル状に敷き詰めたりする。<br>
[[ファイル:Qt PushuButton 2.png|フレームなし|中央]]
<br>
例えば、border-imageの幅を54に変更する時、左上・右上・左下・右下の四隅は、以下のようになる。<br>
上下左右の境界画像は、②④⑥⑧に対応する部分が足りなくなるため、表示されない。<br>
* 左上
*: ① + ② + ④ + ⑤
* 右上
*: ② + ③ + ⑤ + ⑥
* 左下
*: ④ + ⑤ + ⑦ + ⑧
* 右下
*: ⑤ + ⑥ + ⑧ + ⑨
<br>
border-imageは、最初に画像データを指定する必要がある。その他の項目はどちらを先に記述しても構わない。<br>
<br>
下表に、境界画像(border-image)の設定例を示す。<br>
image-widthの指定方法は、CSSのmarginプロパティと同様である。<br>
<center>
{| class="wikitable" style="background-color:#fefefe;"
|-
! style="background-color:#00ffff;" | 項目 
! style="background-color:#00ffff;" | 初期値 
! style="background-color:#00ffff;" | 設定例 
! style="background-color:#00ffff;" | 説明
|-
| 画像データ<br>(image-source) || none || url(:/images/border.png)<br>url(C:/temp/frame.gif) || リソース画像<br>画像ファイル
|-
| 幅と高さ<br>(image-width) || 1 || 20<br>2em 5% 3 || 上下左右20px<br>上2em、左右5%、下3px 
|-
| タイプ<br>(image-repeat) || stretch || round<br>repeat stretch || 縦横ともに均等タイル<br>横方向はタイル、縦方向は伸縮
|}
</center>
<br>
タイプの種類は、タイル(repeat)、均等タイル(round)、伸縮(stretch)の3種類がある。<br>
<br>
例えば、上図②の場合、タイル(repeat)は単純に②を並べるため、途中で画像が切れることがある。<br>
均等タイル(round)は、②を何個表示できるかを計算して、均等になるように②の幅を伸縮する。(端数は四捨五入)<br>
[[ファイル:Qt PushuButton 3.png|フレームなし|中央]]
<br>

==== プッシュボタンのフレーム ====
背景としてフレーム画像を指定する場合、プッシュボタンのサイズ変更に対応できない。<br>
 <syntaxhighlight lang="c++">
 button->setStyleSheet(
                         "background:skyblue url(:/images/frame.png) no-repeat;");
 </syntaxhighlight>
<br>
境界としてフレーム画像を指定することにより、プッシュボタンのサイズ変更に対応することができる。<br>
 <syntaxhighlight lang="c++">
 button->setStyleSheet(
                         "border-width:4px; background-color:skyblue;"
                         "border-image:url(:/images/frame.png) 4;");
 </syntaxhighlight>
<br>
[[ファイル:Qt PushuButton 4.png|フレームなし|中央]]
<br><br>

__FORCETOC__
[[カテゴリ:Qt]]