takuroooのブログ

勉強したこととか

QSplitterの基本的なこと

Qt for Python(PySide2)のQSplitterについて勉強したのでまとめていく。
QSplitterを使うと複数のwidgetの間にサイズを調整できるスプリッターを置くことができる。

目次

SplitterでTextEditを水平に2つ表示する

f:id:takuroooooo:20200723113219p:plain

import sys
from PySide2.QtWidgets import QApplication, QSplitter, QTextEdit
from PySide2.QtCore import Qt

app = QApplication(sys.argv)

qw_text_edit_left = QTextEdit()
qw_text_edit_left.append('left')

qw_text_edit_right = QTextEdit()
qw_text_edit_right.append('right')

qw_splitter = QSplitter()
qw_splitter.addWidget(qw_text_edit_left) # Splitterにwidgetを追加
qw_splitter.addWidget(qw_text_edit_right) # Splitterにwidgetを追加

qw_splitter.show()

sys.exit(app.exec_())
  • addWidgetを使うとwidgetをQSplitterに追加できる。
  • QSplitterは何も設定しないと水平のスプリッターを生成する。
  • QSplitterに追加されるwidget(この例ではQTextEdit)はshow()を呼ぶ必要はない。

SplitterでTextEditを垂直に2つ表示する

f:id:takuroooooo:20200723113231p:plain

import sys
from PySide2.QtWidgets import QApplication, QSplitter, QTextEdit
from PySide2.QtCore import Qt

app = QApplication(sys.argv)

qw_text_edit_top = QTextEdit()
qw_text_edit_top.append('top')

qw_text_edit_bottom = QTextEdit()
qw_text_edit_bottom.append('bottom')

qw_splitter = QSplitter()
qw_splitter.setOrientation(Qt.Orientation.Vertical)  # Splitterを垂直に設定
print(qw_splitter.orientation())
qw_splitter.addWidget(qw_text_edit_top)
qw_splitter.addWidget(qw_text_edit_bottom)

qw_splitter.show()

sys.exit(app.exec_())
  • setOrientationで水平に分割するか垂直に分割するかを選択できる。

Splitterの左右の比率を変える

f:id:takuroooooo:20200723113246p:plain

import sys
from PySide2.QtWidgets import QApplication, QSplitter, QTextEdit

app = QApplication(sys.argv)

qw_text_edit_left = QTextEdit()
qw_text_edit_left.append('left')

qw_text_edit_right = QTextEdit()
qw_text_edit_right.append('right')

qw_splitter = QSplitter() # Orientationの初期値は水平
qw_splitter.addWidget(qw_text_edit_left)
qw_splitter.addWidget(qw_text_edit_right)

qw_splitter_size = qw_splitter.size() # Splitterのサイズを取得する
qw_splitter_size_width = qw_splitter_size.width() # Splitterの横サイズを取得する
qw_splitter.setSizes([qw_splitter_size_width*0.1, qw_splitter_size_width*0.9]) # Splitterの横の比率を1:9に変更する
print(qw_splitter.size()) # Splitter全体のサイズ
print(qw_splitter.sizes()) # Splitterの子widgetごとのサイズ

qw_splitter.show()

sys.exit(app.exec_())
  • setSizesでリストを渡すとQSplitterに登録されている各widgetのサイズを設定できる。
  • この例ではQSplitterに登録されているwidgetが2つなので、要素が2つあるリストを設定している。

Splitterの子widgetのサイズ調整をしたときに調整完了後にサイズを変更する

f:id:takuroooooo:20200723114248g:plain

import sys
from PySide2.QtWidgets import QApplication, QSplitter, QTextEdit

app = QApplication(sys.argv)

qw_text_edit_left = QTextEdit()
qw_text_edit_left.append('left')

qw_text_edit_right = QTextEdit()
qw_text_edit_right.append('right')

qw_splitter = QSplitter()
qw_splitter.addWidget(qw_text_edit_left)
qw_splitter.addWidget(qw_text_edit_right)

qw_splitter.setOpaqueResize(False) # 子widgetのサイズ調整を操作完了後に行う
print(qw_splitter.opaqueResize())

qw_splitter.show()

sys.exit(app.exec_())
  • setOpaqueResizeでTrueを設定するとスプリッターを操作したときに即時に変更が反映される。
  • setOpaqueResizeでFalseを設定すると上記Gifのようにスプリッターを操作した後にスプリッターが実際に移動する。

Splitterにwidgetをインデックスで指定した位置に追加する

f:id:takuroooooo:20200723113313p:plain

import sys
from PySide2.QtWidgets import QApplication, QSplitter, QTextEdit

app = QApplication(sys.argv)

qw_text_edit_left = QTextEdit()
qw_text_edit_left.append('left')

qw_text_edit_right = QTextEdit()
qw_text_edit_right.append('right')

qw_splitter = QSplitter()
qw_splitter.addWidget(qw_text_edit_left)
qw_splitter.addWidget(qw_text_edit_right)

qw_text_edit_center = QTextEdit()
qw_text_edit_center.append('center')
qw_splitter.insertWidget(1, qw_text_edit_center) # index 1 の位置にwidgetを追加

print(qw_splitter.indexOf(qw_text_edit_left))
print(qw_splitter.indexOf(qw_text_edit_center))
print(qw_splitter.indexOf(qw_text_edit_right))

qw_splitter.show()

sys.exit(app.exec_())
  • insertWidgetを使うとインデックスで指定した位置にwidgetを追加することができる。

ソースコード

github.com