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

Wiki: /* プッシュボタンのフレーム */

2024-10-14T02:13:06Z

プッシュボタンのフレーム

← 古い版		2024年10月14日 (月) 11:13時点における版
227行目:		227行目:
	[[ファイル:Qt PushuButton 4.png\|フレームなし\|中央]]		[[ファイル:Qt PushuButton 4.png\|フレームなし\|中央]]
	<br><br>		<br><br>


	{{#seo:		{{#seo:

Wiki: 文字列「FORCETOC」を「{{#seo: |title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki |keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板 |description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This pag…

2024-10-14T01:58:04Z

文字列「__FORCETOC__」を「{{#seo: |title={{PAGENAME}} : Exploring Electronics and SUSE Linux | MochiuWiki |keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板 |description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 | This pag…

← 古い版		2024年10月14日 (月) 10:58時点における版
227行目:		227行目:
	[[ファイル:Qt PushuButton 4.png\|フレームなし\|中央]]		[[ファイル:Qt PushuButton 4.png\|フレームなし\|中央]]
	<br><br>		<br><br>

			{{#seo:
			\|title={{PAGENAME}} : Exploring Electronics and SUSE Linux \| MochiuWiki
			\|keywords=MochiuWiki,Mochiu,Wiki,Mochiu Wiki,Electric Circuit,Electric,pcb,Mathematics,AVR,TI,STMicro,AVR,ATmega,MSP430,STM,Arduino,Xilinx,FPGA,Verilog,HDL,PinePhone,Pine Phone,Raspberry,Raspberry Pi,C,C++,C#,Qt,Qml,MFC,Shell,Bash,Zsh,Fish,SUSE,SLE,Suse Enterprise,Suse Linux,openSUSE,open SUSE,Leap,Linux,uCLnux,Podman,電気回路,電子回路,基板,プリント基板
			\|description={{PAGENAME}} - 電子回路とSUSE Linuxに関する情報 \| This page is {{PAGENAME}} in our wiki about electronic circuits and SUSE Linux
			\|image=/resources/assets/MochiuLogo_Single_Blue.png
			}}

	__FORCETOC__		__FORCETOC__
	[[カテゴリ:Qt]]		[[カテゴリ:Qt]]

Wiki: /* 概要 */

2024-06-18T08:31:59Z

概要

@@ 1行目: / 1行目: @@
 == 概要 ==
-Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。<br>
+QPushButtonは、Qtにおけるプッシュボタンのコントロールである。<br>
 <br><br>

Wiki: /* プッシュボタンのフレーム */

2021-03-26T07:04:59Z

プッシュボタンのフレーム

← 古い版		2021年3月26日 (金) 16:04時点における版
194行目:		194行目:
	"border-image:url(:/images/frame.png) 4;");		"border-image:url(:/images/frame.png) 4;");
	</syntaxhighlight>		</syntaxhighlight>
			<br>
			[[ファイル:Qt PushuButton 4.png\|フレームなし\|中央]]
	<br><br>		<br><br>

	__FORCETOC__		__FORCETOC__
	[[カテゴリ:Qt]]		[[カテゴリ:Qt]]

Wiki: /* フレーム画像 */

2021-03-26T07:03:02Z

フレーム画像

← 古い版		2021年3月26日 (金) 16:03時点における版
136行目:		136行目:
	黒い箇所が透過の場合、背景色と背景画像が見える。<br>		黒い箇所が透過の場合、背景色と背景画像が見える。<br>
	repeatを指定しない場合は、引き伸ばした画像に変換される。<br>		repeatを指定しない場合は、引き伸ばした画像に変換される。<br>
			[[ファイル:Qt PushuButton 1.png\|フレームなし\|中央]]
	<br>		<br>
	原画像を9分割して組み合わせることにより、境界線の長さの変化に対応することができる。<br>		原画像を9分割して組み合わせることにより、境界線の長さの変化に対応することができる。<br>
	下図中央の緑の部分が、border-widthで指定した27pxの境界である。<br>		下図中央の緑の部分が、border-widthで指定した27pxの境界である。<br>
	②④⑥⑧の画像は、タイプにしたがって引き伸ばしたり、タイル状に敷き詰めたりする。<br>		②④⑥⑧の画像は、タイプにしたがって引き伸ばしたり、タイル状に敷き詰めたりする。<br>
			[[ファイル:Qt PushuButton 2.png\|フレームなし\|中央]]
	<br>		<br>
	例えば、border-imageの幅を54に変更する時、左上・右上・左下・右下の四隅は、以下のようになる。<br>		例えば、border-imageの幅を54に変更する時、左上・右上・左下・右下の四隅は、以下のようになる。<br>
176行目:		178行目:
	例えば、上図②の場合、タイル(repeat)は単純に②を並べるため、途中で画像が切れることがある。<br>		例えば、上図②の場合、タイル(repeat)は単純に②を並べるため、途中で画像が切れることがある。<br>
	均等タイル(round)は、②を何個表示できるかを計算して、均等になるように②の幅を伸縮する。(端数は四捨五入)<br>		均等タイル(round)は、②を何個表示できるかを計算して、均等になるように②の幅を伸縮する。(端数は四捨五入)<br>
			[[ファイル:Qt PushuButton 3.png\|フレームなし\|中央]]
			<br>

	~~<br>~~
	==== プッシュボタンのフレーム ====		==== プッシュボタンのフレーム ====
	背景としてフレーム画像を指定する場合、プッシュボタンのサイズ変更に対応できない。<br>		背景としてフレーム画像を指定する場合、プッシュボタンのサイズ変更に対応できない。<br>

Wiki: /* トグルボタンの作成 */

2021-03-21T08:20:13Z

トグルボタンの作成

@@ 102行目: / 102行目: @@
 * ui->pushButton->click();
 *: <code>toggled(bool)</code>も<code>clicked(bool)</code>も呼び出される。(UI操作でボタンを押下したのと同様)
 <br><br>
 __FORCETOC__
 [[カテゴリ:Qt]]

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

2021-02-16T05:25:52Z

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

← 古い版		2021年2月16日 (火) 14:25時点における版
82行目:		82行目:
	}		}
	</syntaxhighlight>		</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>

			__FORCETOC__
			[[カテゴリ:Qt]]

Wiki: ページの作成:「== 概要 == Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。

== プッシュボタンの角…」

2021-02-16T04:59:05Z

ページの作成:「== 概要 == Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。 == プッシュボタンの角…」

新規ページ

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

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

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

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

Wiki: /* プッシュボタンのフレーム */

Wiki: /* 概要 */

Wiki: /* プッシュボタンのフレーム */

Wiki: /* フレーム画像 */

Wiki: /* トグルボタンの作成 */

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

Wiki: ページの作成:「== 概要 == Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。 == プッシュボタンの角…」

Wiki: ページの作成:「== 概要 == Qtにおいて、QPushButtonクラスを使用してボタンをコントロールする手順を記載する。

== プッシュボタンの角…」