PySide超入門【第12回】タブ付きUIを簡単に実装!QTabWidgetの使い方徹底解説

\ 迷ったらまずTechAcademyの無料カウンセリング! /

GUIアプリにおいて複数の画面を切り替えて表示できる「タブ付きUI」は、情報を整理して見せるうえで非常に有効です。PySideでは QTabWidget を使うことで、簡単にこのようなインターフェースを実装できます。

本記事では、QTabWidget の基本的な使い方から、主要なプロパティ・メソッドの徹底解説、そして実践的な活用方法まで、初心者にもわかりやすく解説していきます。

目次

QTabWidgetとは?

QTabWidget は、複数のウィジェットをタブ形式で切り替えて表示するためのコンテナウィジェットです。

基本コード

from PySide6.QtWidgets import QApplication, QWidget, QTabWidget, QLabel, QVBoxLayout
import sys

app = QApplication(sys.argv)

window = QWidget()
layout = QVBoxLayout()

# QTabWidgetの作成
tabs = QTabWidget()

# タブの中身となるウィジェット
tab1 = QLabel("タブ1の内容")
tab2 = QLabel("タブ2の内容")

# タブにウィジェットを追加
tabs.addTab(tab1, "タブ1")
tabs.addTab(tab2, "タブ2")

#================================================
#ここにコードを追加します
#================================================

layout.addWidget(tabs)
window.setLayout(layout)
window.setWindowTitle("QTabWidgetの基本")
window.show()

sys.exit(app.exec())
tab1tab2

主なプロパティとメソッド一覧(全解説)

Noメソッド / プロパティ説明
1addTab(widget, label)新しいタブを追加するaddTab(QWidget(), "設定")
2insertTab(index, widget, label)指定位置にタブを挿入するinsertTab(1, QWidget(), "新規")
3removeTab(index)指定インデックスのタブを削除removeTab(0)
4currentIndex()現在選択されているタブのインデックスを取得index = currentIndex()
5setCurrentIndex(index)指定インデックスのタブを選択setCurrentIndex(1)
6count()タブの数を返すcount()
7setTabText(index, text)タブのラベルを設定setTabText(0, "基本")
8tabText(index)指定インデックスのタブのラベルを取得tabText(1)
9setTabToolTip(index, tip)タブにツールチップ(ホバー時の説明)を設定setTabToolTip(0, “設定画面”)
10setTabEnabled(index, bool)タブの有効/無効を切り替えるsetTabEnabled(1, False)
11setTabsClosable(bool)タブを閉じるボタン付きにするsetTabsClosable(True)
12tabCloseRequested (signal)タブの「閉じる」ボタンが押されたときに発火するシグナルtabs.tabCloseRequested.connect(fn)
13setTabPosition(pos)タブの位置を設定(上・下・左・右)setTabPosition(QTabWidget.West)
14setMovable(bool)タブの順序をドラッグで変更可能にするsetMovable(True)

各プロパティ・メソッド 詳細解説

【1】ウィジェットとラベルを追加

  • 概要:タブに表示するウィジェットと、そのラベルを指定して追加します。
  • メソッド:addTab(widget, label)
  • 使い方::
tabs.addTab(QWidget(), "詳細")

【2】指定位置にタブを挿入

  • 概要:指定した位置にタブを挿入します。
  • メソッド:insertTab(index, widget, label)
  • 使い方
tabs.insertTab(1, QWidget(), "新規")

【3】タブを削除

  • 概要:指定インデックスのタブを削除します。
  • メソッド:removeTab(index)
  • 使い方
tabs.removeTab(0)

【4】現在のインデックス取得

  • 概要:現在選択されているタブのインデックスを取得します。
  • メソッド:currentIndex()
  • 使い方
index = tabs.currentIndex()
print(index)
# 0

【5】現在のインデックスを変更

  • 概要:指定インデックスのタブを選択状態にします。
  • メソッド:setCurrentIndex(index)
  • 使い方
tabs.setCurrentIndex(1)

【6】タブ数を取得

  • 概要:タブの総数を取得します。
  • メソッド:count()
  • 使い方
n = tabs.count()
print(n)
# 3

【7】タブラベルを変更

  • 概要:指定インデックスのタブのラベルを設定します。
  • メソッド:setTabText(index, text)
  • 使い方
tabs.setTabText(0, "設定")

【8】タブラベルを取得

  • 概要:指定インデックスのタブのラベルを取得します。
  • メソッド:tabText(index)
  • 使い方
text = tabs.tabText(1)
print(text)
# タブ2

【9】ツールチップを設定

  • 概要:指定タブにマウスオーバー時のツールチップを表示します。
  • メソッド:setTabToolTip(index, tip)
  • 使い方
tabs.setTabToolTip(0, "設定画面")

【10】タブの有効・無効を切り替え

  • 概要:指定タブの有効/無効状態を設定します。
  • メソッド:setTabEnabled(index, bool)
  • 使い方
tabs.setTabEnabled(1, False)

【11, 12】タブに閉じるボタンを付ける

  • 概要:タブを閉じるための「×」ボタンを表示します。
  • メソッド:setTabsClosable(bool) / tabCloseRequested (signal)
  • 使い方
tabs.setTabsClosable(True)

def close_tab(index):
    tabs.removeTab(index)

tabs.tabCloseRequested.connect(close_tab)

【13】タブの位置を設定

  • 概要:タブの表示位置を上・下・左・右から選べます。
  • メソッド:setTabPosition(pos)
定数名表示位置説明
QTabWidget.Northデフォルト。タブをウィジェットの上に表示
QTabWidget.Southタブをウィジェットの下に表示
QTabWidget.Westタブをウィジェットの左側に縦方向で表示
QTabWidget.Eastタブをウィジェットの右側に縦方向で表示
  • 使い方
from PySide6.QtWidgets import QTabWidget
tabs.setTabPosition(QTabWidget.West)

【14】タブをドラッグで並べ替え可能にする

  • 概要:ユーザーがタブの順序をドラッグで変更できるようにします
  • メソッド:setMovable(bool)
  • 使い方
tabs.setMovable(True)

よくある質問(FAQ)

タブの順序を動的に入れ替えるには?

setMovable(True) を呼び出すことで、ユーザーがドラッグして順序を変えられます。

タブに画像やアイコンを付けたい

addTab()QIcon を渡すことで、タブラベルの左にアイコンを表示できます。

from PySide6.QtGui import QIcon
tabs.addTab(QWidget(), QIcon("icon.png"), "画像付き")
現在表示中のタブを取得するには?

currentIndex() でインデックス、currentWidget() でウィジェットを取得できます。

タブをプログラム的に削除するには?

removeTab(index) を使ってタブを削除できます。

ユーザーがタブを閉じたときの処理は?

tabCloseRequested シグナルにスロット関数を接続して処理を定義します。

まとめ

QTabWidget を使えば、複数の画面を切り替えるUIを簡単に構築できます。初心者でも直感的に扱える設計になっており、アプリの情報整理に最適です。今回紹介したプロパティやメソッドを活用すれば、柔軟でユーザーフレンドリーなUIが実現できるでしょう。

次回は、UIの構造を整理するためのコンテナ「QGroupBox」と「QFrame」の使い方を解説します。

シェアしてくださると嬉しいです!
  • URLをコピーしました!

コメント

コメントする

目次