【Pyside6のチュートリアルを試す】第3回

PySide6 Widgets

第3回はPySide6 Widgetsです。 

www.pythonguis.com

URLを見ると、Using QPushButton, QCheckBox・・・とあるので、ここで一通りのGUI機能が確認できそうです。

Pyside6 Widgets

Widgetの説明は以下のように書いてあります。

「Widgetはユーザーが操作できるUIのコンポーネントに付けられた名前です。ユーザーインターフェースは、ウィンドウ内に配置された複数のウィジェットで構成されています。」

このチュートリアルの目次は

目次

A Quick Demo: PySide6 Widgets

まずデモとして、すべてのWidgetsを含むサンプルコードが記載されています。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24. )
25.  
26. class MainWindow(QMainWindow):
27.     def __init__(self):
28.         super().__init__()
29.  
30.         self.setWindowTitle("Widgets App")
31.  
32.         layout = QVBoxLayout()
33.         widgets = [
34.             QCheckBox,
35.             QComboBox,
36.             QDateEdit,
37.             QDateTimeEdit,
38.             QDial,
39.             QDoubleSpinBox,
40.             QFontComboBox,
41.             QLCDNumber,
42.             QLabel,
43.             QLineEdit,
44.             QProgressBar,
45.             QPushButton,
46.             QRadioButton,
47.             QSlider,
48.             QSpinBox,
49.             QTimeEdit,
50.         ]
51.  
52.         for widget in widgets:
53.             layout.addWidget(widget())
54.  
55.         central_widget = QWidget()
56.         central_widget.setLayout(layout)
57.  
58.         self.setCentralWidget(central_widget)
59.  
60. app = QApplication(sys.argv)
61. window = MainWindow()
62. window.show()
63. app.exec()

実行すると、以下のようなアプリが起動しました。（OSはWIndows10)

Wegets

使用しているWedets

Wedets一覧

QLabel

QLabelはテキスト記述を設定する場合に使用します。

以下のように記述すると、Helloという文字列を持ったlabelというオブジェクトがインスタンスされます。

label = QLabel("Hello")

サンプルコードは以下のようになっており、37行目でHelloの表示位置を設定しています。

1. import sys
2. from PySide6.QtCore import Qt
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24. )
25.  
26. class MainWindow(QMainWindow):
27.     def __init__(self):
28.         super().__init__()
29.  
30.         self.setWindowTitle("My App")
31.  
32.         label = QLabel("Hello")
33.         font = label.font()
34.         font.setPointSize(30)
35.         label.setFont(font)
36.         label.setAlignment(
37.             Qt.AlignmentFlag.AlignHCenter | Qt.AlignmentFlag.AlignVCenter
38.         )
39.  
40.         self.setCentralWidget(label)
41.  
42.  
43. app = QApplication(sys.argv)
44. window = MainWindow()
45. window.show()
46. app.exec()

実行すると、以下のように中央に表示されます。

Hello

配置の種類は以下の通りです。

Qt.AlignmentFlag.AlignLeft	左端に揃えます。
Qt.AlignmentFlag.AlignRight	右端に揃えます。
Qt.AlignmentFlag.AlignHCenter	使用可能なスペースの中央に水平に配置します。
Qt.AlignmentFlag.AlignJustify	使用可能なスペース内でテキストを揃えます。

Qt.AlignmentFlag.AlignTop	上部に揃えます。
Qt.AlignmentFlag.AlignBottom	下部に揃えます。
Qt.AlignmentFlag.AlignVCenter	使用可能なスペースの中央に垂直に配置されます

両方同時に中央に揃える場合は、以下を使用します。

Qt.AlignmentFlag.AlignCenter

水平方向と垂直方向の中央揃え

QPixmapクラスに画像ファイル名を渡して、.setPixmap()を使用することで、画像も表示できます。サンプル画像は猫の写真があり、ダウンロードできるようですが、適当に猫の絵を描いて同じように実行してみました。

1. import sys
2. from PySide6.QtCore import Qt
3. from PySide6.QtGui import QPixmap
4. from PySide6.QtWidgets import (
5.     QApplication,
6.     QCheckBox,
7.     QComboBox,
8.     QDateEdit,
9.     QDateTimeEdit,
10.     QDial,
11.     QDoubleSpinBox,
12.     QFontComboBox,
13.     QLabel,
14.     QLCDNumber,
15.     QLineEdit,
16.     QMainWindow,
17.     QProgressBar,
18.     QPushButton,
19.     QRadioButton,
20.     QSlider,
21.     QSpinBox,
22.     QTimeEdit,
23.     QVBoxLayout,
24.     QWidget,
25. )
26.  
27. class MainWindow(QMainWindow):
28.     def __init__(self):
29.         super().__init__()
30.  
31.         self.setWindowTitle("My App")
32.  
33.         label = QLabel()
34.         label.setPixmap(QPixmap("001.png"))
35.         font = label.font()
36.         font.setPointSize(30)
37.         label.setFont(font)
38.         label.setScaledContents(True)
39.         label.setAlignment(
40.             Qt.AlignmentFlag.AlignHCenter | Qt.AlignmentFlag.AlignVCenter
41.         )
42.         self.setCentralWidget(label)
43.  
44.  
45. app = QApplication(sys.argv)
46. window = MainWindow()
47.  
48. window.show()
49. app.exec()

実行結果

画像

QCheckBox

QCheckBoxは名前の通りチェックボックスを生成します。

サンプルコードでは、checkbox = QCheckBox()となっていたが、チェックボックスの横に文字を表示させるため、以下のように変更して実行しました。

checkbox = QCheckBox("This is a checkbox")

1. import sys
2. from PySide6.QtCore import Qt
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24. )
25. class MainWindow(QMainWindow):
26.     def __init__(self):
27.         super().__init__()
28.  
29.         self.setWindowTitle("My App")
30.  
31.         checkbox = QCheckBox("This is a checkbox")
32.         checkbox.setCheckState(Qt.CheckState.Checked)
33.  
34.         # For tristate: widget.setCheckState(Qt.PartiallyChecked)
35.         # Or: widget.setTriState(True)
36.         checkbox.stateChanged.connect(self.show_state)
37.  
38.         self.setCentralWidget(checkbox)
39.  
40.     def show_state(self, state):
41.         print(state == Qt.CheckState.Checked.value)
42.         print(state)
43.  
44. app = QApplication(sys.argv)
45. window = MainWindow()
46. window.show()
47. app.exec()

実行結果

Qt.CheckState.Checkedを使用しているので、最初からチェックボックスにチェックが入っています。

checkbox

Qt.CheckState.Unchecked	アイテムはチェックされていません
Qt.CheckState.PartiallyChecked	アイテムは部分的にチェックされています
Qt.CheckState.Checked	項目がチェックされています

QComboBox()

QComboBox()はリストから一つを選択するボックスです。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24. )
25.  
26. class MainWindow(QMainWindow):
27.     def __init__(self):
28.         super().__init__()
29.  
30.         self.setWindowTitle("My App")
31.  
32.         combobox = QComboBox()
33.         combobox.addItems(["One", "Two", "Three"])
34.  
35.         # The default signal from currentIndexChanged sends the index
36.         combobox.currentIndexChanged.connect(self.index_changed)
37.  
38.         # The same signal can send a text string
39.         combobox.currentTextChanged.connect(self.text_changed)
40.  
41.         self.setCentralWidget(combobox)
42.  
43.     def index_changed(self, index): # index is an int starting from 0
44.         print(index)
45.  
46.     def text_changed(self, text): # text is a str
47.         print(text)
48.  
49.  
50. app = QApplication(sys.argv)
51. window = MainWindow()
52.  
53. window.show()
54. app.exec()

実行結果

oneを選択すると　two　threeも選択できる画面が表示され、それぞれも選択できます。

combo1

combo2

QComboBox.InsertPolicy.NoInsert	挿入なし
QComboBox.InsertPolicy.InsertAtTop	最初のアイテムとして挿入
QComboBox.InsertPolicy.InsertAtCurrent	現在選択されているアイテムを置き換える
QComboBox.InsertPolicy.InsertAtBottom	最後のアイテムの後に挿入
QComboBox.InsertPolicy.InsertAfterCurrent	現在のアイテムの後に挿入
QComboBox.InsertPolicy.InsertBeforeCurrent	現在のアイテムの前に挿入
QComboBox.InsertPolicy.InsertAlphabetically	アルファベット順に挿入

QListWidget

QListWidgetはリストを表示するためのクラスです。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24.     QListWidget
25. )
26.  
27. class MainWindow(QMainWindow):
28.     def __init__(self):
29.         super().__init__()
30.  
31.         self.setWindowTitle("My App")
32.  
33.         listwidget = QListWidget()
34.         listwidget.addItems(["One", "Two", "Three"])
35.  
36.         # In QListWidget there are two separate signals for the item, and the str
37.         listwidget.currentItemChanged.connect(self.index_changed)
38.         listwidget.currentTextChanged.connect(self.text_changed)
39.  
40.         self.setCentralWidget(listwidget)
41.  
42.     def index_changed(self, index): # Not an index, index is a QListWidgetItem
43.         print(index.text())
44.  
45.     def text_changed(self, text): # text is a str
46.         print(text)
47.     
48.  
49. app = QApplication(sys.argv)
50. window = MainWindow()
51.  
52. window.show()
53. app.exec()

実行結果

リストが表示されました。

list

QlineEdit

QlineEditは1行の編集ボックスです。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24.     QListWidget
25. )
26.  
27. class MainWindow(QMainWindow):
28.     def __init__(self):
29.         super().__init__()
30.  
31.         self.setWindowTitle("My App")
32.  
33.         self.lineedit = QLineEdit()
34.         self.lineedit.setMaxLength(10)
35.         self.lineedit.setPlaceholderText("Enter your text")
36.  
37.         # widget.setReadOnly(True) # uncomment this to make readonly
38.  
39.         self.lineedit.returnPressed.connect(self.return_pressed)
40.         self.lineedit.selectionChanged.connect(self.selection_changed)
41.         self.lineedit.textChanged.connect(self.text_changed)
42.         self.lineedit.textEdited.connect(self.text_edited)
43.  
44.         self.setCentralWidget(self.lineedit)
45.  
46.     def return_pressed(self):
47.         print("Return pressed!")
48.         self.lineedit.setText("BOOM!")
49.  
50.     def selection_changed(self):
51.         print("Selection changed")
52.         print(self.lineedit.selectedText())
53.  
54.     def text_changed(self, text):
55.         print("Text changed...")
56.         print(text)
57.  
58.     def text_edited(self, text):
59.         print("Text edited...")
60.         print(text)
61.     
62. app = QApplication(sys.argv)
63. window = MainWindow()
64.  
65. window.show()
66. app.exec()

実行結果

Enter your text　にカーソルを持っていくと文字を入力することができました。

line

QSpinBox QDoubleSpinBox

QSpinBoxは矢印が描いてあるボタンをクリックして数値を設定することができます。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24.     QListWidget
25. )
26.  
27. class MainWindow(QMainWindow):
28.     def __init__(self):
29.         super().__init__()
30.  
31.         self.setWindowTitle("My App")
32.  
33.         spinbox = QSpinBox()
34.         # Or: doublespinbox = QDoubleSpinBox()
35.  
36.         spinbox.setMinimum(-10)
37.         spinbox.setMaximum(3)
38.         # Or: doublespinbox.setRange(-10, 3)
39.  
40.         spinbox.setPrefix("$")
41.         spinbox.setSuffix("c")
42.         spinbox.setSingleStep(3) # Or e.g. 0.5 for QDoubleSpinBox
43.         spinbox.valueChanged.connect(self.value_changed)
44.         spinbox.textChanged.connect(self.value_changed_str)
45.  
46.         self.setCentralWidget(spinbox)
47.  
48.     def value_changed(self, value):
49.         print(value)
50.  
51.     def value_changed_str(self, str_value):
52.         print(str_value)
53.  
54. app = QApplication(sys.argv)
55. window = MainWindow()
56.  
57. window.show()
58. app.exec()

実行結果

spin

右上の矢印を押すとmax値として設定した３になります。

（spinbox.setSingleStep(3)と設定しているので、+3されて３になる）

max3

QSlider

QSliderはスライドを実行すると値が更新される機能です。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24.     QListWidget
25. )
26. class MainWindow(QMainWindow):
27.     def __init__(self):
28.         super().__init__()
29.  
30.         self.setWindowTitle("My App")
31.  
32.         slider = QSlider()
33.  
34.         slider.setMinimum(-10)
35.         slider.setMaximum(3)
36.         # Or: widget.setRange(-10,3)
37.  
38.         slider.setSingleStep(3)
39.  
40.         slider.valueChanged.connect(self.value_changed)
41.         slider.sliderMoved.connect(self.slider_position)
42.         slider.sliderPressed.connect(self.slider_pressed)
43.         slider.sliderReleased.connect(self.slider_released)
44.  
45.         self.setCentralWidget(slider)
46.  
47.     def value_changed(self, value):
48.         print(value)
49.  
50.     def slider_position(self, position):
51.         print("position", position)
52.  
53.     def slider_pressed(self):
54.         print("Pressed!")
55.  
56.     def slider_released(self):
57.         print("Released")
58.  
59.  
60. app = QApplication(sys.argv)
61. window = MainWindow()
62.  
63. window.show()
64. app.exec()

実行結果

slider

青い部分をクリックすると、標準出力で”Pressed”が表示されます。

そのまま下にスライドすると"position"と値が表示されます。

クリックを話すと"Released”と表示されることが確認できました。

QDial

最後がQDialです。オーディオのアナログダイヤルみたいな代物です。

1. import sys
2.  
3. from PySide6.QtWidgets import (
4.     QApplication,
5.     QCheckBox,
6.     QComboBox,
7.     QDateEdit,
8.     QDateTimeEdit,
9.     QDial,
10.     QDoubleSpinBox,
11.     QFontComboBox,
12.     QLabel,
13.     QLCDNumber,
14.     QLineEdit,
15.     QMainWindow,
16.     QProgressBar,
17.     QPushButton,
18.     QRadioButton,
19.     QSlider,
20.     QSpinBox,
21.     QTimeEdit,
22.     QVBoxLayout,
23.     QWidget,
24.     QListWidget
25. )
26.  
27. class MainWindow(QMainWindow):
28.     def __init__(self):
29.         super().__init__()
30.  
31.         self.setWindowTitle("My App")
32.  
33.         dial = QDial()
34.         dial.setRange(-10, 100)
35.         dial.setSingleStep(1)
36.  
37.         dial.valueChanged.connect(self.value_changed)
38.         dial.sliderMoved.connect(self.dial_position)
39.         dial.sliderPressed.connect(self.dial_pressed)
40.         dial.sliderReleased.connect(self.dial_released)
41.  
42.         self.setCentralWidget(dial)
43.  
44.     def value_changed(self, value):
45.         print(value)
46.  
47.     def dial_position(self, position):
48.         print("position", position)
49.  
50.     def dial_pressed(self):
51.         print("Pressed!")
52.  
53.     def dial_released(self):
54.         print("Released")
55.  
56. app = QApplication(sys.argv)
57. window = MainWindow()
58.  
59. window.show()
60. app.exec()

実行結果

Qdial

Slider同様マウスでクリックして回すとpostionと値が表示されることがわかります。

ここまでが3日目のチュートリアルでした。。