QStackedWidgetの基本的なこと

Qt for Python(PySide2)のQStackedWidgetについて勉強したのでまとめていく。

目次

QStackedWidgetとは

QStackedWidgetを使うとWidgetを重ねることができる。

QStackedWidgetでまとめられたWidgetは常に1つしか表示されない。そのためQStackedWidgetを使用すると、ある時はWidget1を表示して、ある操作をされたらWidget2に切り替えるみたいな制御が可能となる。

これにより状況に応じて必要なWidgetだけを表示でき、UIの表示スペースを小さくすることができる。

StackedWidgetを表示する

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

app = QApplication(sys.argv)

qw_text_edit_1 = QTextEdit()
qw_text_edit_1.append('1')

qw_text_edit_2 = QTextEdit()
qw_text_edit_2.append('2')

qw_stack = QStackedWidget()
 # QStackedWidgetにTextEditを2つ追加する
qw_stack.addWidget(qw_text_edit_1)
qw_stack.addWidget(qw_text_edit_2)
print(qw_stack.currentIndex())

qw_stack.show() # 最初に追加したTextEditが表示される

sys.exit(app.exec_())

• addWidgetを使ってQTextEditを2つQStackedWidgetに追加している。
• この場合最初に追加したQTextEditが表示される。

StackedWidgetに登録されたwidgetをインデックスで指定して表示する

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

app = QApplication(sys.argv)

qw_text_edit_1 = QTextEdit()
qw_text_edit_1.append('1')

qw_text_edit_2 = QTextEdit()
qw_text_edit_2.append('2')

qw_stack = QStackedWidget()
idx_qw_text_edit_1 = qw_stack.addWidget(qw_text_edit_1)
idx_qw_text_edit_2 = qw_stack.addWidget(qw_text_edit_2)
print(idx_qw_text_edit_1, idx_qw_text_edit_2)

 # 表示するwidgetをインデックスで指定する
qw_stack.setCurrentIndex(idx_qw_text_edit_2)
print(qw_stack.currentIndex())

qw_stack.show()

sys.exit(app.exec_())

• setCurrentIndexを使って表示するwidgetをインデックスで指定する。
• インデックスはaddWidgetの戻り値で取得できる。
• 現在設定されているインデックスはcurrentIndexを使って取得できる。

StackedWidgetに登録されたwidgetをwidgetのインスタンスで指定して表示する

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

app = QApplication(sys.argv)

qw_text_edit_1 = QTextEdit()
qw_text_edit_1.append('1')

qw_text_edit_2 = QTextEdit()
qw_text_edit_2.append('2')

qw_stack = QStackedWidget()
qw_stack.addWidget(qw_text_edit_1)
qw_stack.addWidget(qw_text_edit_2)

 # 表示するwidgetをwidgetのインスタンスで指定する
qw_stack.setCurrentWidget(qw_text_edit_2)
print(qw_stack.currentWidget())

qw_stack.show()

sys.exit(app.exec_())

• setCurrentWidgetを使って表示するwidgetをwidgetのインスタンスで指定する。
• 現在設定されているwidgetのインスタンスはcurrentWidgetを使って取得できる。

TreeをクリックしてTextEditを切り替える

import sys
from PySide2.QtWidgets import QApplication, QTreeWidget, QTreeWidgetItem, QTextEdit, QStackedWidget, QSplitter

app = QApplication(sys.argv)

qw_stack = QStackedWidget()

qw_tree = QTreeWidget()
qw_tree.setHeaderLabels(["test"])


def tree_item_clicked(item, column):
    print(item, column, item.type())
    # TreeがクリックされたときにTextEditを切り替える
    qw_stack.setCurrentIndex(item.type())


for i in range(3):
    text = 'page No.' + str(i+1)
    qw_tree_item = QTreeWidgetItem([text], type=i)
    qw_tree.addTopLevelItem(qw_tree_item)

    qw_text_edit = QTextEdit()
    qw_text_edit.append(text)

    stack_idx = qw_stack.addWidget(qw_text_edit)
    # print(stack_idx)

# Treeがクリックされたときに呼ばれる関数を登録
qw_tree.itemClicked.connect(tree_item_clicked)

qw_splitter = QSplitter()
qw_splitter.addWidget(qw_tree)
qw_splitter.addWidget(qw_stack)

qw_splitter.show()

sys.exit(app.exec_())

ソースコード

github.com