[PySide] Qt Style Sheet を使って UI のデザインを変更する

UI のデザインを変更したい場合、QSS という、CSS とほぼ同じ構文のスタイルシートを使って変更できます。 QSS ファイルの拡張子は qss が一般的なようですが、エディタによっては css のほうが便利かもしれません。 QSS 専用のエディタもあるようです。 - https://qiita.com/takavfx/items/f385bd339d9f352d34cf ## 環境 - PySide 6.2.2.1 ## ファイルの読み込みと適用方法 スタイルシートを読み込み、`QApplication` に対して `setStyleSheet()` で設定するとアプリケーション全体へ適用されるようです。 ```css QMainWindow { background-color: #444444; } ``` ```py import sys from PySide6.QtWidgets import QWidget, QApplication, QMainWindow, QVBoxLayout, QPushButton from PySide6.QtCore import Qt class MainWindows(QMainWindow): def __init__(self): super().__init__() container = QWidget() vbox_layout = QVBoxLayout(container) button = QPushButton('button0') vbox_layout.addWidget(button, alignment=Qt.AlignCenter) self.setCentralWidget(container) if __name__ == "__main__": try: with open('style.qss', 'r') as f: style = f.read() except: style = '' app = QApplication(sys.argv) app.setStyleSheet(style) window = MainWindows() window.show() window.resize(360, 240) sys.exit(app.exec()) ``` QSS の書き方については以下のページがとても参考になりました。 - https://unpyside.com/2021/05/03/qss-basic/ ## 特定のウィジェットにのみ適用する方法 `setObjectName()` で名前を設定し、IDセレクタを使って指定します。 ```css QMainWindow { background-color: #444444; } /* ボタン全体へ適用 */ QPushButton { background-color: cyan; color: #444444; } /* button0 のみに適用 */ QPushButton#button0 { background-color: magenta; color: #ffffff; } ``` ```py import sys from PySide6.QtWidgets import QWidget, QApplication, QMainWindow, QVBoxLayout, QPushButton from PySide6.QtCore import Qt class MainWindows(QMainWindow): def __init__(self): super().__init__() container = QWidget() vbox_layout = QVBoxLayout(container) button = QPushButton('button0') button.setObjectName('button0') vbox_layout.addWidget(button, alignment=Qt.AlignCenter) button = QPushButton('button1') vbox_layout.addWidget(button, alignment=Qt.AlignCenter) button = QPushButton('button2') vbox_layout.addWidget(button, alignment=Qt.AlignCenter) self.setCentralWidget(container) if __name__ == "__main__": try: with open('style.css', 'r') as f: style = f.read() except: style = '' app = QApplication(sys.argv) app.setStyleSheet(style) window = MainWindows() window.show() window.resize(360, 240) sys.exit(app.exec()) ``` <div class="separator" style="clear: both;"><a href="https://blogger.googleusercontent.com/img/a/AVvXsEhMzJkDTfoJp8d04ekyw_TzfQVLUtztkJdQgJCXbpiNt6s6a9zz1CjiJZaG7iaoI5GJcfR0HmW9Z8N6sRLvlCSplVwnxt1fL6-nZWWSR7dsJ5vOk7mQ_qZZAgh4Qzm9Ytr61OcwZdFsmK41gTwsoSESJnfGD_QKwHDWzfQm7gkqQMHUC91pg9o5tvuZ=s542" style="display: block; padding: 1em 0; text-align: center; "><img alt="" border="0" width="320" data-original-height="406" data-original-width="542" src="https://blogger.googleusercontent.com/img/a/AVvXsEhMzJkDTfoJp8d04ekyw_TzfQVLUtztkJdQgJCXbpiNt6s6a9zz1CjiJZaG7iaoI5GJcfR0HmW9Z8N6sRLvlCSplVwnxt1fL6-nZWWSR7dsJ5vOk7mQ_qZZAgh4Qzm9Ytr61OcwZdFsmK41gTwsoSESJnfGD_QKwHDWzfQm7gkqQMHUC91pg9o5tvuZ=s320"/></a></div> ## カスタムウィジェットにスタイルを適用する `QWidget` 継承して作ったカスタムウィジェットに QSS を適用するには、`paintEvent` をオーバーライドする必要があります。 これについては以下の記事に書いています。 - https://kuttsun.blogspot.com/2022/02/pyside-qss.html ## 参考 URL - https://unpyside.com/2021/05/03/qss-basic/ - https://kiwamiden.com/how-to-use-qss - https://qiita.com/takavfx/items/f385bd339d9f352d34cf