13,228
回編集
→タブオーダーの設定
| 163行目: | 163行目: | ||
{ | { | ||
widget->setTabOrder(widget, widget); | widget->setTabOrder(widget, widget); | ||
} | |||
</syntaxhighlight> | |||
<br><br> | |||
== ウインドウおよびウィジェットの形状の変更 == | |||
ウインドウおよびプッシュボタン等のウィジェットにおいて、形状を非矩形に変更する、および、背景を画像に変更する手順を記載する。<br> | |||
<br> | |||
==== 非矩形ウインドウ ==== | |||
まず、型抜き用画像を作成する。<br> | |||
型抜き用画像は、ウインドウの形状を表す部分を描画した画像のことであり、画像以外の箇所を透過ピクセルにする。<br> | |||
したがって、型抜き用画像は透過(アルファチャンネル)をサポートするフォーマットで保存する必要がある。<br> | |||
<br> | |||
これは、[https://inkscape.org/ja/ Inkscape](ソフトウェア)を使用して、ウィンドウの形状を描画してPNG形式で保存する方法を推奨する。<br> | |||
<br> | |||
次に、QMainWindowクラスまたはQDialogクラスのコンストラクタにおいて、以下のように記述する。<br> | |||
<syntaxhighlight lang="c++"> | |||
MainWindow::MainWindow() | |||
{ | |||
Qt::WindowFlags flags = Qt::Dialog | Qt::MSWindowsFixedSizeDialogHint | Qt::FramelessWindowHint; | |||
setWindowFlags(flags); | |||
QPixmap pixmap("window.png"); | |||
setMask(pixmap.mask()); | |||
// 型抜き画像のサイズに合わせる | |||
resize( 300, 300 ); | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
==== ウインドウおよびウィジェットの外観の変更 ==== | |||
例えば、ウインドウの背景色を変更する場合、QMainWindowクラスまたはQDialogクラスのコンストラクタにおいて、以下のように記述する。 | |||
<syntaxhighlight lang="c++"> | |||
MainWindow::MainWindow() | |||
{ | |||
// 背景色を設定する | |||
setStyleSheet("* {background-color : rgb( 255, 255, 128 )}"); | |||
// 透過率を設定する | |||
setWindowOpacity(0.7); | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
また、上記の変更は、Qt Designerから実行することもできる。<br> | |||
Qt Designer画面から、ウインドウまたはウィジェットの[プロパティ] - [styleSheet]項目を選択する。<br> | |||
[スタイルシートを変更]画面が開くので、[〜を追加]プルダウンから"background-color"と"Opacity"のQSSを追加する。<br> | |||
<br> | |||
==== QSSをプロジェクト全体に適用する ==== | |||
一般的に、QSSの設定は各ウィジェットごとに設定するが、プロジェクト全体で共通のQSSを設定することもできる。<br> | |||
QSSの書式や構文は、CSSとほぼ同じである。<br> | |||
<br> | |||
以下の例は、Qtに付属しているサンプルを参考にしている。(<Qtのインストールディレクトリ>/examples/widgets/stylesheetディレクトリ)<br> | |||
まず、MainWindow.qssファイルを作成する。<br> | |||
<syntaxhighlight lang="css"> | |||
// MainWindow.qss | |||
// QPushButtonの設定例 | |||
QPushButton | |||
{ | |||
background-color: #000088; | |||
border-color: #000044; | |||
border-style: solid; | |||
border-radius: 5; | |||
} | |||
QPushButton:hover | |||
{ | |||
background-color: #880000; | |||
} | |||
QPushButton:pressed | |||
{ | |||
background-color: #008800; | |||
} | |||
</syntaxhighlight> | |||
<br> | |||
次に、MainWindow.qssファイルをQApplicationクラスのsetStyleSheetメソッドに渡す。<br> | |||
QApplicationクラスのインスタンスはシングルトンとして生成されているため、そのインスタンスから実行する。<br> | |||
また、QSSファイルはリソースとして登録しておくとよい。<br> | |||
<br> | |||
以下の例では、main関数でQSSファイルを読み込み、設定している。<br> | |||
QSSには、他にも様々なクラスやセレクタが存在する。<br> | |||
<syntaxhighlight lang="c++"> | |||
#include "MainWindow.h" | |||
#include <QtCore> | |||
int main(int argc, char *argv[]) | |||
{ | |||
QApplication app(argc, argv); | |||
QFile file(":/qss/MainWindow.qss"); | |||
file.open( QFile::ReadOnly ); | |||
QString strStyles = QLatin1String(file.readAll()); | |||
app.setStyleSheet( strStyles ); | |||
MainWindow w; | |||
w.show(); | |||
return app.exec(); | |||
} | } | ||
</syntaxhighlight> | </syntaxhighlight> | ||