PyQt5 Qt DesignerでGUIをフラットっぽくしてみる

Qt Designerを使うとGUIアプリが簡単に作れて便利ですが、ウィジェットを置くだけだと何となくかっこ悪い感じがします。

VS Codeが好きなので、VS codeっぽいデザインをQt DesignerとPyQt5で作ってみました。今回作ったものはテキストエディタっぽいソフトですが、GUIのテストがしたかっただけですのでソフトとしての機能は何もありません。

Qt DesignerでMainWindowを新規作成

GroupBoxとTabを追加して水平に並べる

GroupBoxにTool Buttonを配置して、2つ目と3つ目のTool buttonの間にVertical Spacerを配置

GroupBoxのレイアウトのマージンをすべて0にする

タブ1にText Editを配置してレイアウトを垂直に並べる

タブ1のレイアウトのマージンをすべて0にする

タブ2にTool buttonとVertical Spacerを配置して垂直に並べる

タブ3を追加してLabel、Font combo cox、Spin Boxを配置してGridに並べる

Tool buttonにアイコンを設定するために適当なアイコンをダウンロードしてくる。今回はRemix Iconを使う。使いたいアイコンを選んでSVG形式でダウンロード

ダウンロードしたアイコンをリソースに登録してTool buttonにセットする

すべてのレイアウトのマージンを0にしたらある程度フラットっぽくなります。あとはタブの切り替え部を非表示にして、左のボタンでタブの切り替えが出来るようになればいい感じになりそうです

UI関連のファイルをPythonのコードに変換

.uiと.qrcのファイルを.pyに変換する必要があります。それぞれpyuic5とpyrcc5のコマンドで変換できます。まずはuiファイルを変換

pyuic5 -o mainwindow.py mainwindow.ui

次にqrcファイルを変換

pyrcc5 -o resource_rc.py resource.qrc

PythonでQMainwindowを表示

最低限下記のコードでウィンドウが表示されます

import sys
from mainwindow import Ui_MainWindow
from PyQt5 import QtWidgets
class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
def main():
    app = QtWidgets.QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()
 
if __name__ == '__main__':
    main()

実行結果

QTabBarを隠す

QTabWidgetからQTabBarを取得してhide()を実行するとTabBarが非表示になります。

self.ui.tabWidget.tabBar().hide()

実行結果

ボタンクリックでタブの切り替え

TabBarが消えたのでボタンをクリックしてタブが切り替えられるようにします。toolButtonのclickedにスロットをconnectします。

self.ui.toolButton.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(0) )
self.ui.toolButton_2.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(1) )
self.ui.toolButton_3.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(2) )

実行結果

結構それっぽいものが出来ました。あとはスタイルシートで色を変えたりすればいい感じになりそうです。

ソースコード

## -*- coding: utf-8 -*-
import sys
from mainwindow import Ui_MainWindow
from PyQt5 import QtWidgets
class MainWindow(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.ui = Ui_MainWindow()
        self.ui.setupUi(self)
        
        self.ui.tabWidget.tabBar().hide()
        
        self.ui.toolButton.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(0) )
        self.ui.toolButton_2.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(1) )
        self.ui.toolButton_3.clicked.connect( lambda : self.ui.tabWidget.setCurrentIndex(2) )
def main():
    app = QtWidgets.QApplication(sys.argv)
    window = MainWindow()
    window.show()
    app.exec()

if __name__ == '__main__':
    main()