界面设计总论

导航栏控件需求分析

效果图

代码实现

界面转换成py代码

pyqt5自定义槽函数

信号槽关联

修改代码关联自定义

main函数添加

代码界面分离

网上有些资料通过QT实现导航栏的，本文通过designer 设计，通过pyqt运行实现导航栏。

涉及到pyqt及 designer的安装部分，请参考前文： (12条消息) eric+pyqt5的安装_proware的博客-CSDN博客

界面设计总论

采用designer或者其他软件进行界面设计时的一般思路:

1) 首先创建一块空白的画布。在designer里面即为创建一个新的main windows窗口。

2）需要对这个画布或者讲 main windows进行区域分割。

3）如果有必要，进一步对区域进行细分分割。

4）在每个区域上部署功能控件。

导航栏控件需求分析

1）以vmware虚拟机配置为例子：左侧为一个列表；右侧为每个列表项对应的内容。

那么对应到designer里面，如何选取控件？首先我们要清楚，此时进行到界面设计的第二步，即区域的分割，在designer中，区域分割通过以下几个控件来实现，这里被统称为“containters”即容器类，也就是容纳其他控件的区域。

2）对于导航栏右侧，需要由多个frame来实现，每个对应左侧一个列表项，因而我们采用stacked widget这个控件，这个控件即为多个frame或者widget 堆叠在一起，通过索引号可以控制切换到哪一层的frame

3）对于导航栏左侧，用一个frame或者widget，然后往此frame或者widget里面添加button实现。

更简单地，则采用list widget这个控件。

4）每个区域的功能控件，则根据需要添加

效果图

最终我们做出一个效果图：

此时仅仅为视图层并不能实现左侧导航，右侧跟着变动的情况。我们还需要添加代码实现控制层。

代码实现

代码功能比较简单：

即针对list widget的 currentRowChanged 信号实现切换 stack widgets

界面转换成py代码

网上资料较多，此处不再赘述，即通过pyuic工具，笔者已经将工具添加到pycharm中的extern tools，这样可以直接对UI文件右键，选择此工具进行转换。

extern tools 针对pyuic5的配置详细配置如下：
Program: 对应pyuic5.exe的绝对
Arguments: $FileName$ -o $FileNameWithoutExtension$.py
Working directory: $FileDir$

pyqt5自定义槽函数

信号槽关联

在目前安装的pyqt5-tools里面带的designer 里面，并没有直接添加自定义槽函数的地方。需要添加一个默认的后修改代码。

通过按钮，讲designer从设计界面切换到信号、槽的编辑界面，然后针对list widget添加，添加后在右下角的信号/槽编辑器可以看到：

修改代码关联自定义

找到转换后的py代码，修改其中信号、槽的关联

self.dev_class.currentRowChanged['int'].connect(self.change_cfg_class)

切换 stack的自定义槽函数如下，在这里index即为 currentRowChanged信号所在的值，这里隐式的表现了信号和槽两个模块间的参数传递，在自定义槽函数的时候一定要注意。

    def change_cfg_class(self,index):self.stackedWidget.setCurrentIndex(index)

至此，主题的界面及简单的控制已经实现了。

main函数添加

转换后的py文件，仅仅一个窗体类，并不能运行，为了使此窗体能运行，我们需要添加main入口。

import sys
if __name__ == '__main__':app = QtWidgets.QApplication(sys.argv)MainWindow = QtWidgets.QMainWindow()ui = Ui_MainWindow()  #界面生成的窗体类ui.setupUi(MainWindow)MainWindow.show()sys.exit(app.exec_())

此时，直接python xxx.py（即UI转换后的py文件）文件即可以运行。并实现通过左侧导航栏到右侧界面的切换。

代码界面分离

行文到此时，我们的代码都是在 pyuic转换后的py文件进行修改的，如果我们重新调整界面，此时需要重新生成py文件，那么我们的修改就被冲掉了！！

因而，我们基于生成的界面类，实现自己的代码，不改动界面生成的py文件。

import sys
from cfg_new import Ui_MainWindow
from PyQt5 import QtCore, QtGui, QtWidgetsclass Cfg_UI(Ui_MainWindow):def connect_slot(self):self.dev_class.currentRowChanged['int'].connect(self.change_cfg_class)def change_cfg_class(self,index):self.stackedWidget.setCurrentIndex(index)if __name__ == '__main__':app = QtWidgets.QApplication(sys.argv)MainWindow = QtWidgets.QMainWindow()ui = Cfg_UI()ui.setupUi(MainWindow)MainWindow.show()sys.exit(app.exec_())

pyqt5实现导航栏相关推荐

修改vue-element-admin左侧导航栏的图标
vue-element-admin一个基于 vue2.0 和 Eelement 的控制面板 UI 框架,这是使用vue技术栈开发的前端程序员的首选管理系统模板,模板以及非常的成熟了,并且有相关的社区和 ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center {margin: auto;width: 50%;border: 3px solid green;padding: 10px; } 文本居中对齐 ...
vue中点击导航栏部分，页面切换
写页面的时候都会用到一些导航栏.点击不同的部分切换不同的页面.并且点击的时候更换颜色代码自己简单的写一下:(vue) <nav> <ul><li v-for=" ...
android values-v21 style 报错,Android 4.4 以上实现透明导航栏和状态栏 Translucent system bar...
第一种方式第一种方式,需要做下面三步设置 1.在values.values-v19.values-v21的style.xml都设置一个 Translucent System Bar 风格的Theme ...
php zblog 侧边栏样式_zblogphp版如何实现导航栏下拉框
zblogphp版目前还无任何插件实现导航栏下拉框,根据自己研究和网上的知识,终于研究成功.下面说下实现步骤: 一.在导航条所在模板模板加入更改以下代码首页{module:navbar} 更改为: ...
mui ios中form表单中点击输入框头部导航栏被推起及ios中form表单中同时存在日期选择及输入框时，日历选择页面错乱bug...
一.ios header导航栏被推起解决方法 1 设置弹出软键盘时自动改变webview的高度 plus.webview.currentWebview().setStyle({ softinputMo ...
iOS 导航栏遮挡问题 --- iOS开发系列 ---项目中成长的知识七
不知大家有没有遇见过自己写的tableview被导航栏遮挡住的问题,反正我是遇见过! 因为在ios7以后所有的UIViewController创建后默认就是full Screen的,因此如果带导航栏的 ...
android应用去掉状态栏_Android 显示、隐藏状态栏和导航栏
Android 显示.隐藏状态栏和导航栏控制状态栏显示,Activity的主题中配置全屏属性 true 控制状态栏显示,在setContentView之前设置全屏的flag getWindow(). ...
【bootstrap】如何解决页面缩小后上方导航栏格式变化的问题
问题描述: bootstrap官方模板中上方导航栏当缩小到一定程度后会发生格式的变化,但我想取消这种变化页面缩小前: 页面缩小后: 解决方法: 经过阅读bootstrap的css代码后发现了这么一行 ...

pyqt5实现导航栏

界面设计总论

导航栏控件需求分析

效果图

代码实现

界面转换成py代码

pyqt5自定义槽函数

信号槽关联

修改代码关联自定义

main函数添加

代码界面分离

pyqt5实现导航栏相关推荐

最新文章

热门文章