📢 Webサイト閉鎖と移転のお知らせ
このWebサイトは2026年9月に閉鎖いたします。
新しい記事は移転先で追加しております。（旧サイトでは記事を追加しておりません）
| 102行目: | 102行目: | ||
* ui->pushButton->click(); | * ui->pushButton->click(); | ||
*: <code>toggled(bool)</code>も<code>clicked(bool)</code>も呼び出される。(UI操作でボタンを押下したのと同様) | *: <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> | |||
<br> | |||
原画像を9分割して組み合わせることにより、境界線の長さの変化に対応することができる。<br> | |||
下図中央の緑の部分が、border-widthで指定した27pxの境界である。<br> | |||
②④⑥⑧の画像は、タイプにしたがって引き伸ばしたり、タイル状に敷き詰めたりする。<br> | |||
<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> | |||
<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><br> | <br><br> | ||
__FORCETOC__ | __FORCETOC__ | ||
[[カテゴリ:Qt]] | [[カテゴリ:Qt]] | ||