**Course Title:** PySide6 Application Development **Section Title:** Building Responsive and Dynamic UIs **Topic:** Using QSplitter and QTabWidget for multi-view interfaces ### Overview In this topic, we'll explore how to create multi-view interfaces using QSplitter and QTabWidget in PySide6. These widgets enable you to design complex, dynamic user interfaces that can efficiently handle multiple views or panels. By the end of this topic, you'll understand how to work with QSplitter and QTabWidget to create responsive and adaptable UIs. ### Using QSplitter QSplitter is a widget that allows users to divide a part of the window into two or more parts. It can be either horizontal (QSplitter.SplitOrientation.Horizontal) or vertical (QSplitter.SplitOrientation.Vertical). QSplitter is commonly used to create complex layouts where users can adjust the size of different views. Here's a basic example of using QSplitter: ```python import sys from PySide6 import QtWidgets class Window(QtWidgets.QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): left_widget = QtWidgets.QWidget() left_widget.setStyleSheet("background-color: lightblue") right_widget = QtWidgets.QWidget() right_widget.setStyleSheet("background-color: lightgreen") splitter = QtWidgets.QSplitter() splitter.addWidget(left_widget) splitter.addWidget(right_widget) layout = QtWidgets.QVBoxLayout() layout.addWidget(splitter) self.setLayout(layout) self.setGeometry(100, 100, 400, 200) self.show() def main(): app = QtWidgets.QApplication(sys.argv) window = Window() sys.exit(app.exec()) if __name__ == "__main__": main() ``` ### Using QTabWidget QTabWidget is a widget that lets you have multiple widgets stacked on top of each other, with each widget having a corresponding tab. This widget is useful when you need to have multiple views that are not all visible at the same time. Here's an example of using QTabWidget: ```python import sys from PySide6 import QtWidgets class Window(QtWidgets.QWidget): def __init__(self): super().__init__() self.initUI() def initUI(self): tab_widget = QtWidgets.QTabWidget() tab1 = QtWidgets.QWidget() tab1_layout = QtWidgets.QVBoxLayout() label1 = QtWidgets.QLabel("Tab 1") tab1_layout.addWidget(label1) tab1.setLayout(tab1_layout) tab2 = QtWidgets.QWidget() tab2_layout = QtWidgets.QVBoxLayout() label2 = QtWidgets.QLabel("Tab 2") tab2_layout.addWidget(label2) tab2.setLayout(tab2_layout) tab_widget.addTab(tab1, "Tab 1") tab_widget.addTab(tab2, "Tab 2") layout = QtWidgets.QVBoxLayout() layout.addWidget(tab_widget) self.setLayout(layout) self.setGeometry(100, 100, 400, 200) self.show() def main(): app = QtWidgets.QApplication(sys.argv) window = Window() sys.exit(app.exec()) if __name__ == "__main__": main() ``` ### Handling Events with QSplitter and QTabWidget QSplitter and QTabWidget can emit signals that you can use to respond to events. For instance, QTabWidget emits the `currentChanged` signal when the current tab changes. You can connect a slot to this signal to update your UI accordingly. ```python tab_widget.currentChanged.connect(self.on_current_tab_changed) def on_current_tab_changed(self): print(f"Current tab index: {self.tab_widget.currentIndex()}") ``` Similarly, QSplitter emits the `splitterMoved` signal when the user moves one of the handles. ```python splitter.splitterMoved.connect(self.on_splitter_moved) def on_splitter_moved(self): print(f"Splitter moved: positions={self.splitter.sizes()}") ``` ### Best Practices Here are some best practices to keep in mind when working with QSplitter and QTabWidget: 1. Make sure your layout hierarchy is properly set up. Your QSplitter or QTabWidget should be contained within a layout that can adjust to the size changes of your splitter or tab widget. 2. Use a layout within each tab of your QTabWidget or each part of your QSplitter. This will ensure that the widgets within your tabs or splitter parts can expand or shrink as needed. You can find more information on QSplitter in the official [Qt documentation](https://doc.qt.io/qt-6/qsplitter.html) and on QTabWidget in the [official Qt documentation](https://doc.qt.io/qt-6/qtabwidget.html). If you have any questions about this material or need further clarification, feel free to leave a comment or ask for help. In the next topic, we'll explore best practices for responsive design in desktop apps. **** [1] [Qt Documentation - QSplitter](https://doc.qt.io/qt-6/qsplitter.html) [2] [Qt Documentation - QTabWidget](https://doc.qt.io/qt-6/qtabwidget.html)