Python+PyQt:使用图标字体打造无边框通用导航界面

Python是一种面向对象的高级动态编程语言,相比于其它如C/C++语言,具有上手快、代码少、开发效率高的特点,Qt是跨平台的C++图形用户界面应用程序开发框架,是当前主流的GUI开发工具之一,其在Python下的绑定是PyQt库。使用“Python+PyQt”架构编写应用软件,可以做到在兼顾软件运行效率的前提下,大大节省时间成本,加快项目的开发进度。

图标字体库(Font Awesome字体库)提供了一套漂亮、可缩放的矢量图标,对于这些图标可使用CSS所提供的所有特性对它们进行更改,包括:大小、颜色、阴影或者其它任何支持的效果。在Python语言中,使用PyQt界面库搭配图标字体库,可以作出非常炫酷的界面程序。

下面给出一个在PyQt界面库中,使用图标字体库开发的一种通用的无边框导航软件界面示例程序,这种导航式界面在嵌入式程序中使用的比较多,是一种比较常见的简单的软件界面设计风格。

示例介绍

软件运行界面如下图所示:

在主界面上,上面部分是导航条区域,包括了软件图标(兼顾返回功能)、标题及关闭按钮,下面部分是主操作区域,初始界面包括六个按钮,点击每个按钮可进入不同的操作页面,如点击“温度监控”按钮,则切换到温度监控页面,在这个页面中可根据实际情况作具体的界面布局,如下图所示:

同时,软件左上角图标区域的图标也作了改变,可点击该区域图标返回到初始界面。

此外,拖动导航条区域或六个按钮之间的空白区域,可以拖动整个窗口到新的位置。

编程分析

对于上面软件界面的实现,主要涉及到的难点包括:

(1) 如何将字体设置或者转换为图标?

(2) 如何在无边框情况下拖动窗体?

(3) 如何对软件界面进行美化?

对于上面的问题,可以单独设计一个负责应用程序辅助管理的继承于QObject的类MgrHelper,对于本例,主要用于实现图标字体的管理、软件窗口的拖动管理等任务。在美化方面,可使用QSS(Qt Style Sheets)即Qt样式表对界面元素进行外观美化。

可使用设计师先设计窗口的外观框架,将其转换为py文件,在主类中进行调用并作美化及相应的各种槽函数实现。下面分别进行介绍。

使用设计师设计软件界面

在Python中使用设计师设计软件界面的详细操作步骤可参考前面的文章:Python+PyQt架构:使用设计师编写界面程序入门示例

对于本例,设计完成后界面如下图所示:

界面中涉及到的所有界面对象元素名称、布局及相互之间的关系如下图所示:

其中,上部的导航条区域是一个QWidget,包含两个QPushButton和一个QLabel,下面主窗口区域是一个QStackedWidget,包含7个页面,第1个页面为主操作页面,后面6个为每个操作对应的具体页面。上下两部分区域采用垂直布局。

在设计师中完成界面设计后,保存该界面文件为“Main.ui”。在PyCharm开发环境中,选中这个文件,在右键菜单中选择“PyQt4-->PyUIC”将其转换为Python能够识别的文件“Ui_Main.py”。

辅助管理助手类MgrHelper的实现代码

辅助类MgrHelper主要实现图标字体的管理、软件窗口的拖动等任务,其实现代码如下图所示:

其主要代码解释如下:

(1)第16行,定义一个类的静态变量self,在主类中调用时,未定义该类的实例,直接使用了该类的相关函数,所以定义了该变量。

(2)第17-24行,初始化函数,装载图标字体库,安装事件过滤器,在事件过滤函数中实现窗口的拖动功能。

(3)第26-30行,定义一个类的静态函数,返回当前实例对象。

(4)第32-35行,根据要设置的图标对应的charCode及字体大小参数,对控件设置字体图标。

(5)第37-47行,对某个字体图标返回它的图像,可设置这个图标的字体大小、颜色及图标尺寸大小。

(6)第49-60行,在事件过滤函数中实现窗体的拖动功能。

主窗口类实现代码

主窗口类MyWindow主要实现窗口字体图标加载、美化及相应槽函数的实现,主要代码框架如下图所示:

其主要代码解释如下:

(1)第63-67行,类初始化代码,加载设计师界面文件。

(2)第69-74行,常量初始化函数。

(3)第76-122行,界面初始化函数,实现字体图标加载、美化,随后介绍。

(4)第123-128行,当点主操作页面的每个操作按钮时,切换到对应的具体操作界面中并修改软件标题。

(5)第130-131行,当点击导航条区域右上角退出按钮时退出程序。

(6)第133-138行,当点击导航条区域左上角返回按钮时,返回到主操作页面,并改变按钮的图标样式。

其中,实现字体图标加载、美化的initUI函数具体代码如下:

其主要代码解释如下:

(1)第78行,设置该窗口为无边框样式。

(2)第79行,为该类增加属性“canMove”,并设置其值为True,用于在事件过滤函数中判断该窗口是否可移动。

(3)第87-88行,设置导航条区域左边和右边两个按钮的字体图标。

(4)第91-99行,使用QSS样式表对顶部导航区域进行美化,包括颜色、字体大小等设置。

(5)第101-122行,为主操作界面上的每个按钮加载字体图标并关联槽函数。

(6)第124-125行,为导航条区域左边和右边两个按钮关联槽函数。

完整的测试代码

对于本例,完整测试代码如下图所示:

代码比较简单,这儿不作详细解释了,运行程序后,就会出现本文开始的提到的运行界面图。

总结

在Python+PyQt架构下使用图标字体库,对于如何实现无边框通用导航软件界面,本例给出了具体设计步骤及详细实现代码。这是一个通用的软件界面布局框架,在这个基础上可以很容易的进行扩展,开发出满足自己特定项目需要的软件界面。

如果你觉得这篇文章对你有用的话,关注+收藏+点赞吧。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190125A0FS2W00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券