实例 | PyQt5动态更新小部件内容

在文章《美化PyQt5图形界面》中，有的小伙伴提问界面美化完之后如何调用和切换各个按钮之间的内容呢？今天，州的先生（https://zmister.com）就用一个简单的Demo实例演示一下，如何通过按钮动态切换部件的内容。

创建图形界面窗口

为了便于理解，我们就用几个简单的小部件来作演示，其中包含：

• 3个按钮，用于点击操作；
• 1个文本，用于显示按钮操作的内容；

其构建代码如下所示：

class Demo(QtWidgets.QMainWindow):
    def __init__(self):
        super().__init__()
        self.init_ui()
 
    def init_ui(self):
        self.setWindowTitle("州的先生zmister.com PyQt5实例")
        main_widget = QtWidgets.QWidget() # 创建一个主部件
        main_widget_layout = QtWidgets.QHBoxLayout() # 创建一个水平布局
        main_widget.setLayout(main_widget_layout) # 设置主部件的布局为水平布局
 
        left_widget = QtWidgets.QWidget() # 创建左侧按钮部件
        left_widget_layout = QtWidgets.QVBoxLayout() # 创建一个垂直布局
        left_widget.setLayout(left_widget_layout) # 设置左侧按钮部件布局为垂直布局
 
        button_1 = QtWidgets.QPushButton("第一个按钮") # 创建按钮
        button_2 = QtWidgets.QPushButton("第二个按钮")
        button_3 = QtWidgets.QPushButton("第三个按钮")
 
        left_widget_layout.addWidget(button_1) # 将按钮添加到左侧部件的布局中
        left_widget_layout.addWidget(button_2)
        left_widget_layout.addWidget(button_3)
 
        right_widget = QtWidgets.QWidget() # 创建一个右侧部件
        self.right_widget_layout = QtWidgets.QGridLayout() # 创建一个网格布局
        right_widget.setLayout(self.right_widget_layout) # 设置右侧部件的布局为网格布局
 
        main_widget_layout.addWidget(left_widget) # 将左侧部件和右侧部件添加到主部件中
        main_widget_layout.addWidget(right_widget)
        self.setCentralWidget(main_widget) # 设置窗口的默认部件为主部件
 
if __name__ == '__main__':
    import sys
    app = QtWidgets.QApplication(sys.argv)
    gui = Demo()
    gui.show()
    sys.exit(app.exec_())
 

运行上述代码，我们可以看到这个图形界面窗口的结构，如下图所示：

麻雀虽小，五脏俱全。我们需要的效果是点击左侧不同的按钮，右侧就会显示不同的内容。这需要使用到信号槽。下面，我们来编写响应按钮点击信号的槽函数。

响应按钮点击信号

因为在上面创建的图形界面窗口中，右侧是一个网格布局的Widget()，所以我们只需要根据按钮的点击信号往其中添加其他的小部件就可以了。

在Demo()中继续创建一个方法，在这个方法中，我们首先遍历右侧布局中的所有子部件，将其删除，然后实例化一个QLabel()部件，最后将其添加到网格布局中，其代码如下所示：

# 点击按钮的槽函数
def click_button(self,btn):
    # 遍历右侧布局中的子部件，将其删除
    while self.right_widget_layout.count():
        child = self.right_widget_layout.takeAt(0)
        if child.widget():
            child.widget().deleteLater()
    text = QtWidgets.QLabel("这是按钮{}的文本".format(btn)) # 创建一个文本部件
    self.right_widget_layout.addWidget(text) # 将文本部件添加到右侧布局中。
 

可以看到，在这个方法中，我们还接收一个参数btn，这个参数用来标识不同的按钮点击。

我们接着将3个按钮的点击信号连接到这个方法上：

button_1.clicked.connect(lambda : self.click_button(1))
button_2.clicked.connect(lambda: self.click_button(2))
button_3.clicked.connect(lambda: self.click_button(3))
 

在这里我们使用了匿名函数lambda来对槽函数进行参数的传递，这样不同的按钮点击就会产生不同的参数。运行代码，我们会得到如下动图所示的效果：

可以看到，当我们点击第一个按钮的时候，右侧显示的是按钮1的文本，点击第二个按钮的时候显示的是第二个按钮的文本，点击第三个按钮的时候显示的是第三个按钮的文本。这样我们就实现了通过按钮切换不同的内容。

如果需要进行扩展，可以将QLabel()部件换成其他相应的部件即可。

有什么问题欢迎留言讨论~