Top Navigation Bar

zhiyiYo2024-02-26 19:56:01

Pivotopen in new window

Pivot

The Pivot widget supports switching between a set of tab items, with an underline appearing under the selected tab item.

You can add tab items through addItem(), each tab item needs to be bound to a globally unique routeKey. The return value is a PivotItemopen in new window instance.

pivot = Pivot()

# Add tab items
pivot.addItem(routeKey="songInterface", text="Song", onClick=lambda: print("Song"))
pivot.addItem(routeKey="albumInterface", text="Album", onClick=lambda: print("Album"))
pivot.addItem(routeKey="artistInterface", text="Artist", onClick=lambda: print("Artist"))

# Set the current tab item
pivot.setCurrentItem("albumInterface")

# Get the current tab item
print(pivot.currentItem())

The top navigation bar is often used with QStackedWidget. When users click on different tab items, the current page will be switched.

class Demo(QWidget):

    def __init__(self):
        super().__init__()
        self.pivot = Pivot(self)
        self.stackedWidget = QStackedWidget(self)
        self.vBoxLayout = QVBoxLayout(self)

        self.songInterface = QLabel('Song Interface', self)
        self.albumInterface = QLabel('Album Interface', self)
        self.artistInterface = QLabel('Artist Interface', self)

        # Add tabs
        self.addSubInterface(self.songInterface, 'songInterface', 'Song')
        self.addSubInterface(self.albumInterface, 'albumInterface', 'Album')
        self.addSubInterface(self.artistInterface, 'artistInterface', 'Artist')

        # Connect signal and initialize the current tab
        self.stackedWidget.currentChanged.connect(self.onCurrentIndexChanged)
        self.stackedWidget.setCurrentWidget(self.songInterface)
        self.pivot.setCurrentItem(self.songInterface.objectName())

        self.vBoxLayout.setContentsMargins(30, 0, 30, 30)
        self.vBoxLayout.addWidget(self.pivot, 0, Qt.AlignHCenter)
        self.vBoxLayout.addWidget(self.stackedWidget)
        self.resize(400, 400)

    def addSubInterface(self, widget: QLabel, objectName: str, text: str):
        widget.setObjectName(objectName)
        widget.setAlignment(Qt.AlignCenter)
        self.stackedWidget.addWidget(widget)

        # Use the globally unique objectName as the route key
        self.pivot.addItem(
            routeKey=objectName,
            text=text,
            onClick=lambda: self.stackedWidget.setCurrentWidget(widget)
        )

    def onCurrentIndexChanged(self, index):
        widget = self.stackedWidget.widget(index)
        self.pivot.setCurrentItem(widget.objectName())

SegmentedWidgetopen in new window

SegmentedWidget

The SegmentedWidget segmented navigation widget supports switching between a set of tab items. Its usage is exactly the same as Pivot, and the return value of addItem() is a SegmentedItemopen in new window instance.

SegmentedToolWidgetopen in new window

SegmentedToolWidget

The SegmentedToolWidget icon segmented navigation widget supports switching between a set of icon tab items.

You can add tab items through addItem(), each tab item needs to be bound to a globally unique routeKey. The return value is a SegmentedToolItemopen in new window instance.

sw = SegmentedToolWidget()

# Add tab items
sw.addItem(routeKey="songInterface", icon=FluentIcon.TRANSPARENT, onClick=lambda: print("Song"))
sw.addItem(routeKey="albumInterface", icon=FluentIcon.CHECKBOX, onClick=lambda: print("Album"))
sw.addItem(routeKey="artistInterface", icon=FluentIcon.CONSTRACT, onClick=lambda: print("Artist"))

# Set the current tab item
sw.setCurrentItem("albumInterface")

# Get the current tab item
print(sw.currentItem())

SegmentedToggleToolWidgetopen in new window

SegmentedToggleToolWidget

The usage of SegmentedToggleToolWidget is exactly the same as SegmentedToolWidget, and the return value of addItem() is a SegmentedToolItemopen in new window instance.

TopNavigationBaropen in new window

TopNavigationBar

TopNavigationBar provides top navigation functionality.

MenuBar

MenuBar provides top menu navigation functionality.

GuideWindowopen in new window

GuideWindow

GuideWindow provides the guide step functionality.

Last Updated 2/7/2025, 1:47:58 AM