「Krita」と「Python」でUIパーツを構築してみよう

はじめに

前回は、UIの中でもファイルダイアログなどの様々なダイアログUIの構築方法を解説しました。今回はまっさらなダイアログに貼り付けるボタンやスライダーなどのUIパーツの構築方法を解説します。

なお、前回のUIは最初から決まったフォーマットのレイアウトが用意されていましたが、今回はオリジナルのレイアウトのダイアログを作成します。例えば、スライダーを移動するとスライダーの数値がラインエディットに表示されるようなレイアウトです。

clickedで処理するUIパーツを構築する

今回解説するUIパーツは「ラベル」「ボタン」「カレンダー」「ラジオボタン」「リストビュー」「テキストエディット」「コンボボックス」「スピンボックス」「ラインエディット」「スライダー」「チェックボックス」です。いずれも前回で最初に解説した素のダイアログ「QDialog」に貼り付けます。今回も「クラス(class)」については解説しませんが、後に今回のUIパーツとほぼ同じスクリプトをクラスを多用して(「継承」させて使います)構築する際に改めて解説します。

今回は代表的なUIパーツだけを解説しますが、他にもUIパーツはたくさん存在します。次のURLを参考に他のウィジェットも実装してみてください。

・Qt for Python(ただしこのURLのQtのほうがバージョンが新しいです)
https://doc.qt.io/qtforpython-6/PySide6/QtWidgets/

ラベルを構築

「ラベル(QLabel)」とは「はり紙」のことです。つまり文字を書いて説明書きなどをする際に使います。他にも操作に応じて説明を変えたり、入力した値を表示したりできます(図1)。

基本的に「レイアウト」クラス(ここでは「QHBoxLayout」クラス)のインスタンスにラベルUIを追加(addWidget)し、それをダイアログにセット(setLayout)して表示します。これは以降のUIパーツで共通です。

・サンプルスクリプト「dlg_label.py」

# モジュール
from PyQt5.QtCore import Qt
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QLabel
# ラベルの作成
layout = QHBoxLayout()
label = QLabel("ラベル") 
layout.addWidget(label)
layout.setAlignment(label,Qt.AlignHCenter)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.setWindowTitle("ラベル") 
dlg.resize(200,200)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
水平にUIパーツを並べる「QHBoxLayout」クラスのレイアウトを作成してラベルUIを追加します。ラベルは水平において中央に整列(setAlignment)します。
QDialogクラスのダイアログ作成は前回同様です。今回は幅高さを200x200にリサイズ(resize)します。

ボタンを構築

「ボタン(QPushButton)」とは「押しボタン」です(図2)。ボタンを押すと処理を実行することができます。

・サンプルスクリプト「dlg_button.py」

# モジュール
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QPushButton
# ボタンが押されたら呼ばれる
def click_button():
  print("ボタンが押されました！")
# ボタンUIの作成
layout = QHBoxLayout()
button = QPushButton("ボタンを押してください") 
layout.addWidget(button)
# ボタンが押されたら「click_button」関数を呼び出す
button.clicked.connect(click_button)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「click_button」関数で"ボタンが押されました！"をコンソールに表示します。
「QPushButton」クラスでボタンUIを作成してレイアウトに追加し、ダイアログにセットします。
ボタンが押されたら(clicked)、「click_button」関数を呼び出します。

カレンダーを構築

「カレンダー(QCalendarWidget)」は「暦」のことです。月ごとに28～31日ずつ日曜日から土曜日まである普通のカレンダーです(図3)。

・サンプルスクリプト「dlg_calendar.py」

# モジュール
from PyQt5.QtWidgets import QDialog,QStackedLayout,QCalendarWidget
# カレンダーが押されたら呼ばれる
def click_calendar(value):
  year = str(value.year())
  month = str(value.month())
  day = str(value.day())
  print(year+"年"+month+"月"+day+"日")
# カレンダーUIの作成
layout = QStackedLayout()
calendar = QCalendarWidget()
layout.addWidget(calendar)
# カレンダーが押されたら「click_calendar」関数を呼び出す
calendar.clicked.connect(click_calendar)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「click_calendar」関数で、クリックした年月日をコンソールに表示します。
「QCalendarWidget」クラスでカレンダーUIを作成してレイアウトに追加し、ダイアログセットします。
カレンダーが押されたら(clicked)、「click_calendar」関数を呼び出します。

ラジオボタンを構築

「ラジオボタン(QRadioButton)」は、複数の選択肢のうちの1つだけを選べる項目1個1個のボタンのことです(図4)。複数のボタンを同時に選べるようにする場合は「チェックボックス」を使います。

・サンプルスクリプト「dlg_radiobutton.py」

# モジュール
from PyQt5.QtWidgets import QDialog,QGroupBox,QVBoxLayout,QRadioButton
# ラジオボタンが押されたら呼ばれる
def click_radio1():
  print("ラジオボタン1が押された")
def click_radio2():
  print("ラジオボタン2が押された")
def click_radio3():
  print("ラジオボタン3が押された")
# ラジオボタンUIの作成
groupBox = QGroupBox("1個だけ選択")
radio1 = QRadioButton("ラジオボタン1")
radio2 = QRadioButton("ラジオボタン2")
radio3 = QRadioButton("ラジオボタン3")
radio1.setChecked(True)
vbox = QVBoxLayout()
vbox.addWidget(radio1)
vbox.addWidget(radio2)
vbox.addWidget(radio3)
vbox.addStretch(1)
groupBox.setLayout(vbox)
layout = QVBoxLayout()
layout.addWidget(groupBox)
# ラジオボタンが押されたら関数を呼び出す
radio1.clicked.connect(click_radio1)
radio2.clicked.connect(click_radio2)
radio3.clicked.connect(click_radio3)
# ダイアログの作成と実行
dlg = QDialog() 
dlg.setLayout(layout)
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「click_radio1」「click_radio2」「click_radio3」関数でラジオボタン1、2、3が押されたことをコンソールに表示します。
「QRadioButton」クラスでラジオボタンUIを作成し、垂直にUIパーツを並べる「QVBoxLayout」レイアウトに追加して「QGroupBox」クラスにセットします。これをレイアウトに追加してダイアログにセットします。
ラジオボタンが押されたら(clicked)、「click_radio1」か「click_radio2」か「click_radio3」関数を呼び出します。

リストビューを構築

「リストビュー(QListView)」は「一覧表」のことで、Microsoft Office Excelの表に似ています(図5)。ただ大抵1列しかない一覧表です。

・サンプルスクリプト「dlg_listview.py」

# モジュール
from PyQt5.QtCore import QStringListModel
from PyQt5.QtWidgets import QDialog, QHBoxLayout, QListView
# リスト
fruit_list = ['りんご', 'バナナ', 'イチゴ']
# リストビューが押されたら
def click_listview(index):
  print(fruit_list[index.row()])
# リストビューUIの構築
model = QStringListModel(fruit_list)
view = QListView()
view.setModel(model)
layout = QHBoxLayout()
layout.addWidget(view)
# リストビューがクリックされたら「click_listview」を呼び出す
view.clicked.connect(click_listview)
# ダイアログの作成と実行
dlg = QDialog()
dlg.setLayout(layout)
dlg.setWindowTitle("Dialog")
dlg.exec_()

【サンプルスクリプトの解説】
「PyQt5」内のモジュールを読み込みます。
「click_listview」関数でクリックした項目をコンソールに表示します。
「QStringListModel」で項目のリストをモデルに追加します。
「QListView」クラスでリストビューUIを作成し「setModel」メソッドでモデルをセットします。
リストビューをレイアウトに追加し、ダイアログにセットします。
リストビューが押されたら(clicked)、「click_listview」関数を呼び出します。