1. 機能概要
Qt スタイル シート(Qt Style Sheets、QSS) は、ユーザー インターフェイスをカスタマイズするための強力なメカニズムであり、その概念と用語は HTML の Cascading Style Sheets (CSS) からインスピレーションを得ています。
HTML の CSS と同様に、Qt のスタイル シートはプレーン テキスト形式で定義されており、これらのスタイル定義はアプリケーションの実行中にロードして解析できます。スタイル シートを使用してさまざまなインターフェイス コンポーネント (QWidget クラスとそのサブクラス) のスタイルを定義できるため、アプリケーション インターフェイスはさまざまな効果を表現できます。多くのソフトウェアには、さまざまなインターフェイス テーマを選択する機能があり、Qt スタイル シートを使用することで実現できます。
Qtスタイルシートの編集機能がUIデザイナーに統合されました。フォーム インターフェイスを設計する場合、フォームまたはインターフェイス コンポーネントを選択し、マウスの右ボタンをクリックして、ポップアップ ショートカット メニューの [スタイルシートの変更...] メニュー項目を選択すると、スタイル シート編集ダイアログ ボックスが表示されます。
QWidget{
background-color: rgb(0, 85, 127);
font: 12pt "宋体";
}
これは、QWidget クラスの背景色、フォント サイズ、名前を定義します。このスタイル定義は、QWidget クラスとそのサブクラスに適用されます。
QLineEdit{
border: 2px groove gray;
border-radius: 10px;
padding: 2px 4px;
color: rgb(255, 255, 0);
border-color: rgb(0, 255, 0);
}
上記は、境界線の幅、丸い境界線の半径、境界線の色、テキストの色などを含む、QLineEdit クラスの表示効果を定義します。
ドロップダウン メニューのボタンでは、前景色、背景色、背景色、選択した色の選択色、背景画像の背景画像など、いくつかの一般的なスタイル属性を定義できます。
フォームのビジュアルデザイン時にスタイルシートを設定すると、すぐに効果を表示できます。
Qt スタイル シートの構文: Qt スタイル シートの構文 (Syntax) は、HTML の CSS 構文とほぼ同じです。Qt スタイル シートには一連のスタイル ルールが含まれており、スタイル ルールはセレクターといくつかの宣言で構成されます。
QPlainTextEdit{
font: 12pt "仿宋";
color: rgb(255, 255, 0);
background-color: rgb(0, 0, 0);
}
QPlainTextEdit はセレクターであり、次の中括弧内のスタイル宣言が QPlainTextEdit クラスとそのサブクラスに適用されることを示します。スタイル宣言部分はスタイル ルールのリストであり、各スタイル ルールは属性と値で構成され、各ルールはセミコロンで終わります。各スタイルルールは「属性:値」で構成されます。
フォント属性は、フォントサイズは12pt、フォント名は「Fan Song」で、属性が複数の値を持つ場合、複数の値はスペースで区切られます。
Qt スタイル シートは、CSS2 で定義されたすべてのセレクターをサポートします
| セレクタ | 例 | 使用 |
|---|---|---|
| ユニバーサルセレクター | * | すべてのコンポーネント |
| タイプセレクター | Qプッシュボタン | すべての QPushButton クラスとそのサブクラスのコンポーネント |
| 属性セレクター | QPushButton[フラット = false ] | すべてのフラット プロパティが false である QPushButton クラスとそのサブクラスのコンポーネント。スタイル シートの適用後にコンポーネントのプロパティが変更された場合、表示効果を更新するにはスタイル シートを再適用する必要があります。 |
| 非サブクラスセレクター | .Qプッシュボタン | QPushButton クラスのすべてのコンポーネント (ただし、QPushButton のサブクラスは除く) |
| IDセレクター | Qプッシュボタン # btnOK | objectName が btnOK である QPushButton インスタンス |
| 依存オブジェクトセレクター | Qダイアログ Qプッシュボタン | QDialog に属する QPushButton クラスのすべてのインスタンス、つまり QDialog ダイアログ ボックス内のすべての QPushButton |
| 子オブジェクトセレクター | Qダイアログ > Qプッシュボタン | QDialog に直接従属する QPushButton クラスのすべてのインスタンス |
セレクターは結合でき、単一のスタイル宣言を複数のセレクターに適用できます。
QPlainTextEdit,QLineEdit,QPushButton,QCheckBox{
color: rgb(255, 255, 0);
background-color: rgb(0, 0, 0);
}
注: QSS の構文とその中の記号は Python 言語とは何の関係もありません。そのため、QSS でブール値を表す定数は true と false であり、Python では大文字の True と False を使用しません。
サブコントロール: QComboBox のドロップダウン ボタン、QSpinBox の上ボタンと下ボタンなど。これらのインターフェイス要素の表示効果は、セレクターのサブコントロールを通じて制御できます。
QComboBox::drop-down{
image: url(:/images/images/down.bmp); }
セレクター QComboBox::drop-down は、QComboBox のドロップダウン サブコントロールを選択し、定義されたスタイルは、その image プロパティをリソース ファイル内の Picture down.bmp に設定します。
Qt のサブコントロールのリストについては、Qt のヘルプドキュメントを参照してください。
Pseudo-state : セレクターには疑似状態を含めることができるため、スタイル ルールはインターフェイス コンポーネントの特定の状態 (条件付き適用ルール) にのみ適用できます。疑似状態はセレクターの後にコロンで区切って表示されます。
QLineEdit:hover{
background-color: lime;
color: yellow;}
マウスが QLineEdit 上に移動するとき (ホバー)、QLineEdit の背景色と前景色を変更するタイミングを定義します。
疑似状態の前に感嘆符を付けて、疑似状態を反転します。
QLineEdit:!read-only{
background-color: rgb(235, 255, 251); }
readonly プロパティが false である QLineEdit の背景色を定義します。
擬似状態は連続して使用できます。これは論理演算と同等です。
QCheckBox:hover:checked{
color: red; }
チェックされた QCheckBox コンポーネント上にマウスを移動すると、そのフォントの色が赤に変わるように定義します。これは、マウスを QCheckBox に移動しただけ、または QCheckBox にチェックを入れただけの場合、フォントは赤にならないことを意味します。
擬似状態は並列に使用できます。これは、論理和の計算と同等です。
QCheckBox:hover, QCheckBox:checked{
color: red; }
マウスを QCheckBox コンポーネント上に移動するか、QCheckBox コンポーネントにチェックを入れると、フォントの色が赤に変わります。そのうちの1つは完了するとすぐに赤くなります。
子コントロールは疑似状態も使用できます
QCheckBox::indicator:checked{
image: url(:/images/images/checked.bmp);}
QCheckBox::indicator:unchecked{
image: url(:/images/images/unchecked.bmp);}
QCheckBoxのインジケーターのチェックあり・チェックなしの表示絵を定義し、例えばイラストの効果を得ることができます。
Qt スタイル定義のいくつかの一般的な擬似状態は、これらの擬似状態と柔軟なアプリケーションに精通しており、必要なインターフェイス効果を定義できます。
属性: Qt スタイル シートではセレクターごとに複数のスタイル ルールを定義でき、各ルールは「属性: 値」のペアです。Qt スタイル シートで定義できる属性は多数あります。「Qt スタイル」を見つけることができます。すべてのプロパティの詳細な説明については、「シート リファレンス」を参照してください。
[スタイル シートの編集] ダイアログ ボックスでは、[リソースの追加]、[グラデーションの追加]、[色の追加]、および [フォントの追加] を選択できます。
✔ リソースの追加: プロジェクトのリソース ファイルから画像を選択します。
✔色の追加: コンポーネントを設定するためのさまざまな色。
✔グラデーションの追加: コンポーネントを設定するためのさまざまなグラデーションカラー。
各インターフェイス コンポーネントは次の図で表すことができます。
(1) content は、QLineEdit がテキストを表示するために使用される領域など、コンテンツを表示するための長方形の領域です。max-width、min-width、max-height、min-height 属性はそれぞれ、この長方形領域を定義するための最大/最小の幅と高さを定義します。次に例を示します。
QLineEdit{
min-width:50px;
max-height:40px;
}
(2) パディングはコンテンツを囲む長方形の領域で、パディングの幅はpadding属性で定義するか、padding-top、padding-bottom、padding-left、padding-rightでそれぞれtop、bottom、leftの幅を定義します。パディングの右側、たとえば:
QLineEdit{
padding: 0px 10px 0px 10px;}
(3)border はパディングを囲む境界線であり、境界線の線幅、線種、色は border 属性 (または border-width、border-style、border-color) で定義でき、上、下、左境界線の適切な線幅と色を個別に定義することもできます。border-radius を使用して境界線の角の円弧半径を定義し、角丸四角形で編集ボックスやボタンなどのコンポーネントを構築します。次に例を示します。
QLineEdit{
border-width: 2px;
border-style: solid;
border-color: gray;
border-radius: 10px;
padding: 0px 10px;
}
(4) margin は境界線と親コンポーネントの間の空白のマージンで、それぞれ上、下、左、右のマージン サイズを定義できます。
Qtスタイルシートの使用：
1. プログラムで Qt スタイル シートを使用する
最初の方法: UI フォームを視覚的にデザインするときに、スタイル シート エディターを直接使用してフォームまたはフォーム上のコンポーネントのスタイル シートをデザインします。この方法でデザインされたスタイルは保存されます。フォームの .ui ファイル内 フォームでは、フォームの作成時に、設計されたスタイル シートが自動的に適用されます。
2 つ目は、QApplication クラスの setStyleSheet() 関数を使用して、アプリケーションの作成時にアプリケーションのスタイルをグローバルに設定することです。
if __name__ == "__main__": #用于当前窗体测试
app = QApplication(sys.argv) #创建GUI应用程序
app.setStyleSheet("QLineEdit { background-color: gray }")
form=QmyWidget() #创建窗体
form.show()
sys.exit(app.exec_())
ここでは、アプリケーション内のすべての QLineEdit コンポーネントにスタイルが設定されています。アプリケーション内の QLineEdit コンポーネントに他のスタイルが設定されていない場合、すべての QLineEdit コンポーネントの背景色は灰色になります。
QWidget の setStyleSheet() 関数を使用して、ウィンドウ、ダイアログ ボックス、またはインターフェイス コンポーネントのスタイルを設定することもできます。スタイルは通常、フォームのコンストラクターで設定されます。
class QmyWidget(QWidget):
def __init__(self, parent=None):
super().__init__(parent)
self.ui=Ui_Widget()
self.ui.setupUi(self)
self.setStyleSheet("QLineEdit { background-color: red }")
これにより、このフォーム上のすべての QLineEdit コンポーネントのスタイルが設定されます。つまり、背景色が赤になります。
インターフェイス コンポーネントはすべて QWidget のサブクラスであるため、特定のコンポーネントを使用して setStyleSheet() 関数を呼び出すこともできます。
self.ui.editName.setStyleSheet("color: blue;"
"background-color: lime;"
"selection-color: yellow;"
"selection-background-color: red;")
objectName が editName のコンポーネントを設定するスタイルですが、このときスタイルシートにセレクター名を設定する必要はなく、設定したスタイルは editName コンポーネントにのみ適用されます。
このように、スタイルシートはプログラム内で固定されており、インターフェイス効果を切り替えることは当然不可能です。インターフェイス効果を動的に切り替えるには、通常、スタイル シート定義を .qss 接尾辞が付いたプレーン テキスト ファイルとして保存し、プログラムでファイルを開いてテキストの内容を読み取り、setStyleSheet() 関数を呼び出してスタイルを適用します。 。
if __name__ == "__main__": #用于当前窗体测试
app = QApplication(sys.argv) #创建GUI应用程序
file = QFile("myStyle.qss")
file.open(QFile.ReadOnly)
qtBytes = file.readAll() #QByteArray
pyBytes = qtBytes.data() #QByteArray转换为bytes
styleStr = pyBytes.decode("utf-8") #bytes转换为str
app.setStyleSheet(styleStr)
form = QmyWidget() #创建窗体
form.show()
sys.exit(app.exec_())
ここでは同じディレクトリ内のファイル myStyle.qss が使用され、すべてのスタイル定義がこのファイルに保存されます。スタイル ファイルを使用する利点は、インターフェイスの効果を変更する場合、多言語インターフェイスと同様に、ファイルを変更するかファイルを切り替えるだけで済むことです。また、サードパーティのスタイル定義ファイルを使用してプロフェッショナルなスタイルを実現するのにも便利です。インターフェース効果。
2. スタイル定義の明確さ
複数のスタイル ルールが属性の異なる値を定義すると、競合が発生します。例えば：
QPushButton#btnSave { color: gray }
QPushButton {
color: red }
上記の例では、QPushButton#btnSave は QPushButton のすべてのインスタンスではなく特定のオブジェクトを指すため、QPushButton よりも具体的なセレクターとみなされます。したがって、上記 2 つのルールをウィンドウに適用すると、btnSave ボタンの前景色は灰色になり、他のボタンの前景色は赤になります。
また、疑似状態を持つセレクターは、疑似状態のないセレクターよりも具体的であるとみなされます。次に例を示します。
QPushButton:hover {
color: white }
QPushButton {
color: red }
このように、マウスがボタンの上にあるときは色が白になり、それ以外の場合は色が赤になります。
2 つのセレクターの詳細性が同じ場合、ルールが表示される順序が優先され、後で表示されるルールが有効になります。次に例を示します。
QPushButton:hover {
color: white }
QPushButton:enabled {
color: red }
ここでの両方のセレクターは同じ特異性を持っているため、マウスが有効なボタンの上にあるときは、第 2 法則のみが適用されます。この場合、競合を望まない場合は、次の 2 つのルールが競合しないように、ルールを変更してより明示的にする必要があります。
QPushButton:hover:enabled {
color: white }
QPushButton:enabled {
color: red }
親子関係の 2 つのクラスは、セレクターとして使用する場合に同じ明確さを持ちます。次に例を示します。
QPushButton {
color: red }
QAbstractButton {
color: gray }
2 つのセレクターの詳細性は同じであるため、ステートメントの順序のみに依存します。
3. スタイル定義のカスケード スタイル
定義は、アプリケーション、フォーム、または特定のコンポーネントで定義できます。コンポーネントのスタイルは、その親コンポーネント、親フォーム、およびアプリケーションのスタイルを融合したものです。競合が発生した場合、コンポーネントはそれ自体に最も近いスタイル定義を使用します。つまり、コンポーネント自身のスタイル、親コンポーネントのスタイル定義、親フォームのスタイル定義、またはアプリケーションのスタイル定義を順番に使用します。スタイルセレクターに関係なく。
たとえば、QApplication でグローバル スタイルを設定するには:
from PyQt5.QtWidgets import qApp
qApp.setStyleSheet("QPushButton { color: red }")
その場合、スタイルが定義されていないアプリケーション内のすべての QPushButton の前景色は赤になります。qApp は現在のアプリケーションを表すグローバル変数であり、PyQt5.QtWidgets モジュールからインポートする必要があります。
フォーム クラス (QmyWidget など) でスタイルを定義する場合:
self.setStyleSheet("QPushButton { color: blue }")
この場合、フォーム上のボタンの前景色は赤ではなく青になります。
フォーム上に btnSave という名前の QPushButton ボタンがある場合、そのスタイルは次のように定義されます。
self.ui.btnSave.setStyleSheet(
"color: yellow; background-color: black;")
btnSave ボタンは、前景色と背景色を独自のスタイルで表示します。
Qt スタイル シートは強力で、独自のインターフェイス効果をデザインできますが、これには優れたアート デザインが必要であり、プログラミングに関わる内容はそれほど多くありません。