PyQt5利用Qt designer(QT设计师)使用tab widget和stacked widget实现多页面切换

这篇具有很好参考价值的文章主要介绍了PyQt5利用Qt designer(QT设计师)使用tab widget和stacked widget实现多页面切换。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、使用Qt designer(QT设计师)进行多页面切换ui设计

本文只提供一种设计思路来完成简单的页面切换功能,并没有涉及页面的美化以及复杂的业务功能实现。

点击tab页对tab widget的tab页进行切换效果图:
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

点击radio button驱动stacked widget多页面切换效果图:
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

下面进行分步说明。

打开qt designer,新建一个widget窗口。
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

将一个tab widget拖入其中

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

在窗口内空白部分点击右键,选择布局中的垂直布局
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

tab widget默认只有2个tab,如果需要更多的话,可以按照需求自行插入新的tab页。比如这里想在tab2后面再插一个tab3,那么选中tab2,然后右键点击,选择在当前页之后插入
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

tab页的标题根据自己的需求进行调整
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

下面我们主要对tab1进行主要的设计,以此说明原理

在tab1上拖入一个Scroll Area,准备在里面放3个部分内容。以便拖动展示。
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

设置Scroll Area的大小
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

在Scroll Area内,放入3个Frame,表示3个模块
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

点击Scroll Area, 对其进行垂直布局,这样3个Frame就可以变整齐了
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

将3个Frame的拉伸比例设置为1:1:1
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

依次点击每个Frame,右键单击,选择改变样式表,为其添加背景色,这样3个Frame就可以很容易肉眼区分了
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

效果如下:
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

然后我们针对第一个Frame进行设计,其他两个Frame,以此类推,这样就可以通过每个Frame展示不同的内容。

在Frame1中拖入一个Stacked Widget, 用于展示3个不同的页面
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

再拖入一个Widget, 用于放置3个按钮
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

选中Frame1,对其进行垂直布局
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

将widget的高度设为30
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

然后拖动3个radio button到这个widget里,并将它们的最大高度和宽度都设为16
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

右键单击widget,对其进行水平布局
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

然后再在widget内这3个按钮的两侧分别放置两个水平弹簧, 就可以将3个radio button压缩到正中间
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

因为我们有3个radio button,stacked widget默认提供2个页面,我们再加一个,方法同上面tab widget加页面是一样的, 这三个radio button分别对应stacked widget中的3个页面
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

我们给stacked widget中的三个page页面分别添加一张图片,以示区分。添加完成后,此时,点击右上角那两个前后箭头,应该可以看到页面能正常切换
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

这里关于怎么添加资源文件,就不赘述了。我们这里是新建了一个资源文件,名字叫resource, 对应的文件就是下文提到的resource.qrc
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt在为Frame添加了图片之后,原来的背景色就被我删掉了。所以后面运行时看不到之前添加的背景色了。

多页面切换的ui设计示例就到此结束了。目前还缺少页面切换功能的实现。

二、实现tab widget多页面切换

它的实现比较简单,在ui页面,添加对应的信号和槽函数即可。
信号是currentChanged(int), 槽函数是setCurrentIndex(int)

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

三、实现stacked widget多页面切换

stacked widget的多页面切换,我们是通过3个radio button来驱动的,点中哪个radio button,就切换到stacked widget的对应某个页面。

为此,我们也需要设置stacked widget的信号和槽,和上面tab widget一样。信号是currentChanged(int), 槽函数是setCurrentIndex(int)

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

但是怎么和radio button关联呢,为此我们还需要手动负责currentChanged(int)信号的发射。这将在代码中体现。

四、生成代码

首先,将资源文件resource.qrc和ui文件my_tab_widget.ui转换为py格式。

# 将qrc资源文件编译为二进制文件
pyrcc5 -o resource_rc.py resource.qrc

# 将ui文件生成为相关的类
pyuic5 -o my_tab_widget.py my_tab_widget.ui

这里我们生成了resource_rc.py和my_tab_widget.py

pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

需要注意的是,由于我们的资源文件名为resource.qrc,在执行以下转换命令之后

pyuic5 -o my_tab_widget.py my_tab_widget.ui

生成的my_tab_widget.py最后,会自动生成一句:

import resource_rc

所以我们在转换资源文件resource.qrc时,需要将其名称指定为resource_rc.py, 否则在程序运行时,会报错,提示找不到resource_rc模块。

这些工作做完后,我们新建一个main.py, 内容如下:
main.py

from PyQt5.QtWidgets import QApplication, QWidget
import sys
from my_tab_widget import Ui_Form

class MyUI(QWidget, Ui_Form):
    def __init__(self):
        super().__init__()
        super().setupUi(self)

        # 这里我们将radio button的clicked信号,绑定到自定义的槽函数上
        self.radioButton.clicked.connect(self.radioButton_click_handler)
        self.radioButton_2.clicked.connect(self.radioButton_2_click_handler)
        self.radioButton_3.clicked.connect(self.radioButton_3_click_handler)
        
    # 自定义的槽函数,用于发射stackedWidget的currentChanged信号,来驱动页面的切换
    def radioButton_click_handler(self):
        self.stackedWidget.currentChanged.emit(0)
        
    def radioButton_2_click_handler(self):
        self.stackedWidget.currentChanged.emit(1)
        
    def radioButton_3_click_handler(self):
        self.stackedWidget.currentChanged.emit(2)

if __name__ == '__main__':
    app = QApplication(sys.argv)
    
    my_widget = MyUI()
    my_widget.show()
    
    sys.exit(app.exec_())

在main.py里,我们自定义了一个MyUI类,继承自我们设计的ui界面,并在其中将radio button的clicked信号绑定到自定义的槽函数上,用于发射stackedWidget的currentChanged信号,以此驱动stackedWidget的页面切换。

五、运行效果

点击tab页对tab widget的tab页进行切换:
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt

点击radio button驱动stacked widget多页面切换:
pyqt页面切换,Python图形界面-PyQt5入门系列教程,Python应用,qt,ui,开发语言,python,PyQt文章来源地址https://www.toymoban.com/news/detail-780660.html

到了这里,关于PyQt5利用Qt designer(QT设计师)使用tab widget和stacked widget实现多页面切换的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包