| QT5/Pyqt5配置工具以及实现图片显示，点击按钮显示图片，点击按钮跳转页面，添加槽函数 | 您所在的位置：网站首页 › 按钮onclick跳转页面 › QT5/Pyqt5配置工具以及实现图片显示，点击按钮显示图片，点击按钮跳转页面，添加槽函数 |
QT5/Pyqt5配置工具以及实现图片显示，点击按钮显示图片，点击按钮跳转页面，添加槽函数
|
1.pyqt5配置环境，添加插件（插件包括：在pycharm调用qt5,将.ui文件转成.py文件） 请参考这位大佬的内容 (19条消息) Windows下PyQt编写简单软件并打包_pyqt 打包_poetmilk的博客-CSDN博客 2.在pycharm点击tools然后点击插件里面的qt_desinger（第一步骤已经配置了） 想要实现的界面功能： ①有多个界面，点击按钮能实现界面之间的跳转 ②固定位置显示图片（这个在qt5里用资源文件加载也可以，这里说pyqt5方法） ③点击按钮显示图片 step1:打开后界面长这样
step2：因为我们是要做一个多页面的，所以需要添加控件stack widget到灰框中，调整大小
step2.1：找到控件List Widget，拖入刚刚stack widget控件的范围，调整大小，之后所有的控件都要在白色框里添加
step2.2第一个界面已经有了，接下来是第二个界面，右键点击第二步stack widget控件的灰色部分，图里面的位置（不要点到2.1步的控件那了），点击插入页，然后点插入到当前页之后，就会出现新的界面。想要几个界面就插入几个界面
step2.3切换界面是点击这两个小三角
step3:加入一些控件，比如按钮，静态文本，或者要显示图片的label
step4：如下是界面，现在需要实现，界面1中点击按钮显示左边的TextLabel处的图，点击另一个按钮跳转到第二页.界面2左边的图直接显示，点击右边的图跳转到界面1
界面1
界面2 step5：第四步已经做好了界面，保存。现在该加入功能了。点击第二个，编辑槽，信号 分割一下，后面的step5的内容是如何添加槽函数 step5.1:进入槽/信号编辑模式，鼠标到的地方就会变红（此时没有办法操作控件）
step5.2找到想要添加功能的控件。比如上图的按钮"点击后显示左边的图"，然后点左键往下拖动，会有一根线。拖到白色框外面
step5.3松手会弹出一个界面
step5.4左边选clicked,右边点编辑
step5.5点编辑后会进入一个新的界面。点击槽的加号，会出现一个新的函数，可以根据需要改名字，点击确定。（不同的功能需要不同的槽函数，根据需要可以多添加几个。如点击跳转新页面是一类，就添加一个槽函数；点击出现图片是一类，要再添加一个槽函数），添加好后点确定
step5.6点击刚刚的槽函数，点确定，这个控件就已经添加上槽函数了。其他控件也是如此操作。（如果功能相同，前面已经添加槽函数后面就不用添加，直接在这个界面选择就可以了）
这是添加好槽函数之后的样子
step5.7退出槽编辑。所有控件都添加好槽函数之后，目前没有办法编辑控件，切换模式就可以了 step6：保存文件，打开pycharm(之后的操作都在这里)，能看到一个.ui文件。右击，选择External Tools，点击qt_uic(第一步已经装好的插件)，就会把ui文件变成py文件。但是这时候是运行不了的，因为缺少主函数和类定义。下面添加主函数和类定义，添加好后点击run就可以看到运行出来的界面 class MyDialog(QtWidgets.QDialog): def __init__(self, parent=None): super().__init__(parent) self.ui = Ui_Dialog() self.ui.setupUi(self) if __name__ == '__main__': import sys app = QtWidgets.QApplication(sys.argv) dlg = MyDialog() dlg.show() sys.exit(app.exec_())step7：页面能加载出来了，但是功能还没有实现。现在开始实现功能，如下面代码。 class这几句还有最后if_name这几句上一步已经有了。添加功能是中间这一部分。 第一部分：将Button和槽函数链接。这一句里，pushButton11是我想要实现功能的控件。实现的功能就是schange槽函数（schange这个名字就是第5.5步添加的。这个槽函数实现的是跳转功能）。如果有多个控件实现同一种功能，就可以写到一起。如我下面的全部代码的第一部分。（这一部分要写到MyDialg类里面） self.ui.pushButton11.clicked.connect(self.schange)第二部分：加载图片。也就是界面出来图片就存在。这一部分可以在QT5里面加载资源文件，也可以写代码。222.png是想显示的图片。label11是想让这张图片显示的位置。这个label11就是控件里面添加的label，改了个名字叫label11 pixmap1 = QtGui.QPixmap('222.png') self.ui.label11.setPixmap(pixmap1)比如说这个label叫label11，那么图片222就会显示在这个区域（图片显示的大小随着label的大小变化）
第三部分：设置界面默认第一页 self.ui.stackedWidget.setCurrentIndex(0)这个也要写在MyDialg类里面，因为有多个界面，如果不写这一句，run出来的显示的是最后一页。注意这个0是索引，第一页的索引是0，第二页索引是1，以此类推。 第四部分：点击按钮显示图片（sl1函数）。在前面第一步已经把按钮绑定好sl1函数了，label32是图片显示位置，点击按钮就会执行操作。 def sl1(self): pixmap = QtGui.QPixmap('222.png') self.ui.label32.setPixmap(pixmap)有多个的话写法 def sl1(self): sender = self.sender() if sender == self.ui.pushButton11: # 添加以下代码，显示图片22.png pixmap = QtGui.QPixmap('22.png') self.ui.label21.setPixmap(pixmap) elif sender == self.ui.pushButton12: # 添加以下代码，显示图片22.png pixmap = QtGui.QPixmap('22.png') self.ui.label32.setPixmap(pixmap) elif sender == self.ui.pushButton31: # 添加以下代码，显示图片222.png pixmap = QtGui.QPixmap('222.png') self.ui.label31.setPixmap(pixmap)第五部分：点击按钮跳转界面 意思是，如果是Button11,点击之后跳转第二页（索引为1） 如果是Button12,点击之后跳转第三页（索引为2） def schange(self): sender = self.sender() if sender == self.ui.pushButton11: self.ui.stackedWidget.setCurrentIndex(1) elif sender == self.ui.pushButton12: self.ui.stackedWidget.setCurrentIndex(2) elif sender == self.ui.pushButton31: self.ui.stackedWidget.setCurrentIndex(0)全部代码 class MyDialog(QtWidgets.QDialog): def __init__(self, parent=None): super().__init__(parent) self.ui = Ui_Dialog() self.ui.setupUi(self) # 1.在构造函数中连接QPushButton的clicked信号到槽函数schange和sl1函数 self.ui.pushButton11.clicked.connect(self.schange) self.ui.pushButton12.clicked.connect(self.schange) self.ui.pushButton31.clicked.connect(self.schange) self.ui.pushButton31.clicked.connect(self.sl1) #2. 加载图片 pixmap1 = QtGui.QPixmap('a.png') pixmap2 = QtGui.QPixmap('b.png') pixmap3 = QtGui.QPixmap('222.png') pixmap4 = QtGui.QPixmap('22.png') self.ui.label11.setPixmap(pixmap1) self.ui.label21.setPixmap(pixmap2) self.ui.label31.setPixmap(pixmap3) self.ui.label32.setPixmap(pixmap4) # 3.设置默认显示页面为第一页 self.ui.stackedWidget.setCurrentIndex(0) # 4.点击按钮，切换至另一个界面，并在控制台中打印“hello” def sl1(self): pixmap = QtGui.QPixmap('222.png') self.ui.label.setPixmap(pixmap) print("hello") # 5.切换界面的槽函数 def schange(self): sender = self.sender() if sender == self.ui.pushButton11: self.ui.stackedWidget.setCurrentIndex(1) elif sender == self.ui.pushButton12: self.ui.stackedWidget.setCurrentIndex(2) elif sender == self.ui.pushButton31: self.ui.stackedWidget.setCurrentIndex(0) |
【本文地址】