PyQt6アプリケーションのスタイリング – デフォルトのQSSスタイルシートとカスタムのQSSスタイルシート

このガイドでは、PyQtアプリケーションのスタイルを設定する方法について説明します。

PyQtに慣れていない場合は、PythonのPyQTフレームワークを使用するためのガイドをお読みください。

をご覧ください。

をご覧ください。

PyQtのデフォルトのテーマとその変更方法から始めて、さまざまな種類のカスタムスタイルを使用する方法へと進みます。

デフォルトのPyQtテーマ

PyQtはOSベースのデフォルトのテーマで動作します。

つまり、テーマを指定しないと、システムによってアプリケーションの外観が異なります。

アプリケーションは、Linuxマシンとは対照的にWindows 10マシンでは異なる外観になります。

PyQtには、デフォルトのテーマ以外にも多くのスタイルやテーマが同梱されています。

複数のオペレーティングシステムに配布しながらアプリケーションの外観を統一するには、デフォルトのテーマをビルド済みのものに変更するか、独自のテーマをビルドしたいと思います。

または、オペレーティングシステムに応じてネイティブな外観を維持することもできます。

利用可能なすべてのSystem-Styleを確認する

デフォルトのシステムスタイルはシステムによって異なるため、すべてのシステムで同じデフォルトスタイルが使用できるわけではありません。

幸いなことに、PyQtには利用可能なすべてのスタイルを取得する関数が組み込まれており、辞書に格納されています。

それでは、利用可能なすべてのシステムスタイルを見てみましょう。

# The QStyleFactory object holds all the default system styles.
from PyQt6.QtWidgets import QStyleFactory
print(QStyleFactory.keys())

Windowsマシンでは、これは次の3つのスタイルを返します。

['windowsvista', 'Windows', 'Fusion']

一方、Linuxでは、次のようになります。

['Breeze', 'Oxygen', 'QtCurve', 'Windows', 'Fusion']

既存のアプリケーションにどのデフォルトスタイルが適用されているかを知るには、app.style()を介してobjectName()にアクセスします。

import sys
from PyQt6.QtWidgets import QApplication


app = QApplication(sys.argv)
print(app.style().objectName())

結果は、やはりオペレーティングシステムに依存します。

windowsvista

PyQt6アプリケーションにシステムスタイルを適用する

デフォルトのシステムスタイルを他のスタイルに変更するには、 QApplication インスタンスの setStyle() メソッドを使用します。

小さなアプリケーションで、デフォルトのスタイルを Fusion に設定してみましょう。

import sys
from PyQt6.QtWidgets import QApplication, QPushButton, QVBoxLayout, QWidget
app = QApplication(sys.argv)


# Set the 'Fusion' system style
app.setStyle('Fusion')


# Create the parent Widget of the Widgets added to the layout
window = QWidget()


# Create the Vertical Box Layout Manager, setting window as parent by passing it in the constructor.
layout = QVBoxLayout(window)


# Create the button Widgets we will add to the layout.
# Add the button Widgets to the VerticalBoxLayout
layout.addWidget(QPushButton('One'))
layout.addWidget(QPushButton('Two'))
layout.addWidget(QPushButton('Three'))
layout.addWidget(QPushButton('Four'))
layout.addWidget(QPushButton('Five'))


# Show the parent Widget
window.show()


# Launch the application
sys.exit(app.exec())

これで、Fusionスタイルシートが要素に適用され、外観が変化します。

カスタム PyQt6 スタイル

これらのスタイルはとても素晴らしいものですが、あなたのアプリケーションには別のビジョンがあるかもしれません。

Fusionスタイルシートの残りの部分を適用したまま、ボタンの色を赤に変更したい場合はどうすればよいでしょうか。

HTMLページをスタイライズするのと同じように、PyQtアプリケーションもインラインやQSSスタイルシートでスタイライズすることができます。

インラインとQSSスタイルシートを使用します。

QSSスタイルシートは、CSSスタイルシートからヒントを得て、構文を借用し、小さな調整を加えています。

PyQt6アプリケーションにインラインスタイルを追加する

スタイリングコードの量が独立したQSSファイルを作るほどではない場合、スタイリングコードをインラインで、つまりアプリケーションが存在するPythonファイル内で書くのが最も簡単です。

HTMLページをインラインでスタイリングするのと同様に、これはベストプラクティスとは言えませんが、プロトタイピングやテスト、本当に小さな調整には適しています。

各 QWidget は setStyleSheet() 関数を受け付けます。

この関数は CSS 文字列を受け取ります。

widget.setStyleSheet(
    """
    CSS SYNTAX
    """
)

例えば、ウィジェットに色をつけたり、フォントファミリーとサイズを設定したい場合、おなじみの CSS シンタックスを使うことができます。

...
button = QPushButton('One')
button.setStyleSheet(
    "background-color: #262626; "
    "font-family: times; "
    "font-size: 20px;"
)


layout.addWidget(button)

元のボタン追加コードをこのように置き換えると、アプリケーションは次のようになります。

さて、他のコンポーネントにスタイルを設定したい場合、setStyleSheet()関数を適用します。

しかし、複数のコンポーネントにスタイルを設定する場合、これはすぐに問題になります…。

しかし、setStyleSheet() 関数を QApplication インスタンスに適用して、アプリケーション全体にスタイルを適用することができます。

しかし、すでにそこにいるのであれば、新しいカスタムスタイルシートを作成して、インラインのスタイリングコードの代わりにそれを使用したほうがいいかもしれません。

カスタムスタイルシートの作成

オペレーティングシステムのスタイルは、PyQtのさまざまな出荷時に存在するスタイルシートに過ぎません。

あなたのアプリケーションのために特別に作られた独自のQSSスタイルシートを定義することを止めるものは何もありません。

さらに、スタイルシートを使用すると、ビジネスロジックをスタイルコードから分離することが理にかなっていることに加え、コンポーネントをインラインでスタイル付けすることで発生する可能性がある無数の問題を解決できます。

QSS ファイルは、CSS ファイルと非常によく似ています。

唯一の違いは、スタイルを設定したい要素をどのように識別するかです。

あるウィジェットに一意の ID を割り当てて、個別にスタイルを設定することはできません。

リンゴとリンゴをひとまとめにして、ウィジェットタイプを同じスタイルにする必要があります。

オプションで、ウィジェット内のオブジェクトを、ウィジェット自身から個別にスタイル設定することもできます。

QPushButton {
    background-color: blue;
}


QLabel#title {
    font-size: 15px;
}

最初のスタイルは、アプリケーション内のすべての QPushButton オブジェクトの背景色を定義します。

2番目のスタイルは、QLabelのタイトルオブジェクトにのみスタイルを設定します。

QSSファイルをアプリケーションに含めるには、ファイルを読み込んで QApplication.setStyleSheet(str) 関数を使うことで適用することができます。

# Open the qss styles file and read in the css-alike styling code
with open('styles.qss', 'r') as f:
    style = f.read()


# Set the stylesheet of the application
    app.setStyleSheet(style)

本当に、これらのファイルはスタイリング文字列のコンテナに過ぎません。

デモアプリケーションのスタイリング

それでは、簡単なQSSスタイルシートを作成し、簡単なデモアプリケーションに適用してみましょう。

import sys
from PyQt6.QtWidgets import (QApplication, QTableWidget, QTableWidgetItem)
from PyQt6.QtGui import QColor


# Declare our table values
nordic_countries = [('Norway', 'Oslo', 'Yes'),
          ('Iceland', 'Reykjavik', 'Yes'),
          ('Denmark', 'Copenhagen', 'Yes'),
          ('Belgium', 'Brussels','No')]

# Create the Qt Application
app = QApplication(sys.argv)


# Create the QTableWidget Widget
table = QTableWidget()


# Set the row count of the table to the length of the 'nordic_countries' variable
table.setRowCount(len(nordic_countries))


# Since every country in our 'nordic_countries' variable has the same amount of attributes
# we take the amount (3) of the first country and use this as the number of columns
table.setColumnCount(len(nordic_countries[0]))


# Set the Horizontal headers using setHorizontalHeaderLabels()
table.setHorizontalHeaderLabels(['Country', 'Capital', 'Scandinavian?'])


# Loop through every country in our 'nordic_countries' variable
for i, (country, capital, scandinavian_bool) in enumerate(nordic_countries):


# Make a QTableWidgetItem --> acts as an item in a table
    item_country = QTableWidgetItem(country)
    item_capital = QTableWidgetItem(capital)
    item_scandinavian_bool = QTableWidgetItem(scandinavian_bool)


# Set the value of the items
    table.setItem(i, 0, item_country)
    table.setItem(i, 1, item_capital)
    table.setItem(i, 2, item_scandinavian_bool)


# Finally show the table
table.show()


# Open the sqq styles file and read in the css-alike styling code
with open('styles.qss', 'r') as f:
    style = f.read()
    # Set the stylesheet of the application
    app.setStyleSheet(style)


# Launch the application
sys.exit(app.exec())

そして、styles.qssファイルの中で。

QTableWidget {
    font-family: Titillium;
    font-size: 20px;
}


QTableWidget::item {
    background-color: #D3D3D3;


}


QTableWidget::item:hover {
    background: qlineargradient(x1: 0, y1: 0, x2: 0, y2: 1, stop: 0 #e7effd, stop: 1 #cbdaf1);
    border: 1px solid #bfcde4;
}

結論

このガイドでは、Python で PyQt6 アプリケーションをスタイル設定する方法について見てきま した。

標準のオペレーティングシステムのスタイル、インラインコードを使用してスタイルを設定する方法、およびカスタムの QSS スタイルシートを作成する方法について説明しました。