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

Pyside6 Layouts

チュートリアルの「Pyside6 Layouts」を行ってみます。

Layoutを使用して、複数のWidgetを一つのWindowに表示します。

サンプルコードは色のクラスを作成してそれをいくつか生成し、Widgetを作成いています。

まず色を表示するWidgetは、以下の通り。Color.pyという名前でファイルにしました。

from PySide6.QtWidgets import QWidget
from PySide6.QtGui import QPalette, QColor
class Color(QWidget):
def __init__(self, color):
super().__init__()
self.setAutoFillBackground(True)
palette = self.palette()
palette.setColor(QPalette.Window, QColor(color))
self.setPalette(palette)

Colorを呼び出すメインクラスは、import Colorで呼び出して使用しました。

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget
from PySide6.QtGui import QPalette, QColor
from Color import Color
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("My App")
widget = Color('red')
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

実行結果

一面赤のWindowが開きました。

次にQVBoxLayoutクラスをと、addWidget関数を使用して、Widget都として追加します。

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QVBoxLayout,QHBoxLayout
from PySide6.QtGui import QPalette, QColor
from Color import Color
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("My App")
layout = QVBoxLayout()
layout.addWidget(Color('red'))
widget = QWidget()
widget.setLayout(layout)
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

実行結果

Widgetとして追加されました。

さらに以下の2行を追加して、緑と青のColor Widgetを追加します。

layout.addWidget(Color('green'))
layout.addWidget(Color('blue'))

QVBoxLayoutを使用しているので垂直方向に3つのWidgetが生成されました。

layout = QVBoxLayout()をlayout = QHBoxLayout()に変更すると

水平方向に表示されました。

Nesting layouts

QHBoxLayoutとQVBoxLayoutを組み合わせてWidgetを配置できます。

サンプルコードはlayout1 layout2 lyaout3という３つのWidgetに対して、それぞれ

layout1 = QHBoxLayout()
layout2 = QVBoxLayout()
layout3 = QVBoxLayout()

と設定し、まずlayout2に対して縦方向に赤、黄色、紫を表示するWidgetを作成します。

次に、layout1の一番左の位置にlayout2を、真ん中を緑に指定します。

layout3は赤と紫を縦方向に表示させるWidgetを作成し、それをlayout1にaddすることで、一番右側がlayout3として表示されます。

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QVBoxLayout,QHBoxLayout
from PySide6.QtGui import QPalette, QColor
from Color import Color
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("My App")
layout1 = QHBoxLayout()
layout2 = QVBoxLayout()
layout3 = QVBoxLayout()
layout2.addWidget(Color('red'))
layout2.addWidget(Color('yellow'))
layout2.addWidget(Color('purple'))
layout1.addLayout( layout2 )
layout1.addWidget(Color('green'))
layout3.addWidget(Color('red'))
layout3.addWidget(Color('purple'))
layout1.addLayout( layout3 )
widget = QWidget()
widget.setLayout(layout1)
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

実行結果

.setContentMarginsを使用して四隅を設定できます。上の図では上下左右空白がありますが、例えば.setContentMargins(0,10,0,10)とすると、左と右は隙間がなくなり、上は10、下も10隙間が空いて表示されます。

.setSpacingはWidget間の幅を設定します。.setSpacing(0)とすると各Widget間の隙間が0になります。

サンプルコードでは、.setContentMargins(0,0,0,0) .setSpacing(20)となっていましたが、

値を変えて実行してみました。

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QVBoxLayout,QHBoxLayout
from PySide6.QtGui import QPalette, QColor
from Color import Color
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("My App")
layout1 = QHBoxLayout()
layout2 = QVBoxLayout()
layout3 = QVBoxLayout()
layout1.setContentsMargins(10,0,10,0)
layout1.setSpacing(0)
layout2.addWidget(Color('red'))
layout2.addWidget(Color('yellow'))
layout2.addWidget(Color('purple'))
layout1.addLayout( layout2 )
layout1.addWidget(Color('green'))
layout3.addWidget(Color('red'))
layout3.addWidget(Color('purple'))
layout1.addLayout( layout3 )
widget = QWidget()
widget.setLayout(layout1)
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

実行結果

setSpacing(0)としたので、Widget間は隙間がなくなりました。

QGridLayout widgets arranged in a grid

QGridLayoutクラスを使用して、幾つかのマス目に設定し任意のマスにWidgetを配置できます。

import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QWidget,QVBoxLayout,QHBoxLayout,QGridLayout
from PySide6.QtGui import QPalette, QColor
from Color import Color
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("My App")
layout = QGridLayout()
layout.addWidget(Color('red'), 0, 0)
layout.addWidget(Color('green'), 1, 0)
layout.addWidget(Color('blue'), 1, 1)
layout.addWidget(Color('purple'), 2, 1)
widget = QWidget()
widget.setLayout(layout)
self.setCentralWidget(widget)
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()

実行結果

チュートリアルにあるサンプルコードを実行すると、2x3のマス目に対して

layout.addWidget(Color('red'), 0, 0)
layout.addWidget(Color('green'), 1, 0)
layout.addWidget(Color('blue'), 1, 1)
layout.addWidget(Color('purple'), 2, 1)

と配置した実行結果です。