PyQt5实现导航栏

需求

在做图形化界面开发的时候，我需要做顶部切换，类似网页中导航栏，如下图所示

下图是我的需求，在软件的顶部用 QPushButton控件和stacked widget实现导航栏功能

以下两幅图片是简单的demo，按btn1 -> 页面0，按btn2 -> 页面1

思路

1. 创建一个存有按钮名字的list，如 tab = [‘pushButton’, ‘pushButton_2’]
2. 创建两个按钮和一个stacked widget，布局无要求，别遮挡就行
3. 创建stacked widget的页面，有多少个按钮就创建多少个页面，代码如下

        for i in range(2):
                label = QLabel('这是页面 %d' % i, self)
                label.setAlignment(Qt.AlignCenter)
                # 此处加了一个margin边距(方便区分QStackedWidget和QLabel的颜色)
                label.setStyleSheet('background: rgb(%d, %d, %d);margin: 50px;' % (
                        randint(0, 255), randint(0, 255), randint(0, 255)))
                self.stackedWidget.addWidget(label)

4. 给按钮绑定响应函数，在响应函数中修改stacked widget 显示页面id。数据流：按钮的name -> 去步骤1中list找对应ID -> 修改stacked widget显示id

self.pushButton.clicked.connect(lambda: self.update_(self.pushButton))
self.pushButton_2.clicked.connect(lambda: self.update_(self.pushButton_2))

# stackedWidget内容切换，通过更改其页面ID实现
def update_(self,btn):
    self.stackedWidget.setCurrentIndex(tab.index(btn.text()))

全部代码如下，

from PyQt5 import QtCore,QtWidgets
from PyQt5.QtWidgets import QWidget, QLabel
from PyQt5.QtCore import Qt
from random import randint

tab = ['pushButton', 'pushButton_2']

class Ui_MainWindow(QWidget):
    def __init__(self, *args, **kwargs):
        super(Ui_MainWindow, self).__init__(*args, **kwargs)
        MainWindow.setObjectName("MainWindow")
        MainWindow.resize(800, 600)
        self.centralwidget = QtWidgets.QWidget(MainWindow)
        self.centralwidget.setObjectName("centralwidget")
        self.pushButton = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton.setGeometry(QtCore.QRect(20, 10, 75, 23))
        self.pushButton.setText('pushButton')
        self.pushButton_2 = QtWidgets.QPushButton(self.centralwidget)
        self.pushButton_2.setGeometry(QtCore.QRect(110, 10, 75, 23))
        self.pushButton_2.setText('pushButton_2')

        # 创建stackedWidget
        self.stackedWidget = QtWidgets.QStackedWidget(self.centralwidget)
        self.stackedWidget.setGeometry(QtCore.QRect(20, 50, 751, 521))
        MainWindow.setCentralWidget(self.centralwidget)

        # 两个按钮对应两个页面
        for i in range(2):
                label = QLabel('这是页面 %d' % i, self)
                label.setAlignment(Qt.AlignCenter)
                # 此处加了一个margin边距(方便区分QStackedWidget和QLabel的颜色)
                label.setStyleSheet('background: rgb(%d, %d, %d);margin: 50px;' % (
                        randint(0, 255), randint(0, 255), randint(0, 255)))
                self.stackedWidget.addWidget(label)

        # 每个按钮单击时设置触发事件
        self.pushButton.clicked.connect(lambda: self.update_(self.pushButton))
        self.pushButton_2.clicked.connect(lambda: self.update_(self.pushButton_2))

    # stackedWidget内容切换，通过更改其页面ID实现
    def update_(self,btn):
        self.stackedWidget.setCurrentIndex(tab.index(btn.text()))

if __name__ == "__main__":
    import sys
    app = QtWidgets.QApplication(sys.argv)
    MainWindow = QtWidgets.QMainWindow()
    ui = Ui_MainWindow()
    MainWindow.show()
    sys.exit(app.exec_())

总结

本例只做简单原理介绍，深入了解请看下面两个链接
参考：
QStackedWidget左侧选项卡
PyQt实例：设计有折叠效果的左侧选项卡，且点击不同选项卡能进行不同界面的切换