沐鸣娱乐


        Python+PyQt架构:使用设计师编写界面程序入门示例

        PyQt是Qt界面库在Python下的绑定 ,为在Python语言下编写GUI界面程序提供了极大的便利。对于界面程序的设计 ,可以使用代码构建,也可以借助于其提供的设计师(Qt Designer)工具来构建  。

        下面给出一个在Python语言中使用PyQt界面库及设计师工具编写界面程序的入门例子。

        例子说明

        该例运行界面如下图所示,包括了常用软件界面必备的几个区域部分:菜单栏 、工具栏、状态栏及主窗口显示区域,其中,主窗口显示区域使用水平及垂直分割条控件以左一右二的形式分为了三个窗口部分 。

        Python+PyQt架构:使用设计师编写界面程序入门示例

        工具栏的显示样式可通过菜单设置为”仅显示图标”或”显示图标和文字”两种样式。另外,通过点击工具栏上窗口视图的下拉菜单可设置右面两个窗口的显示或隐藏状态 。

        下面看下怎么在设计师(Qt Designer)中来实现这个界面程序的设计。

        前提条件

        假定你使用的IDE是PyCharm ,并且已经配置了如下图所示三个常用工具:

        Python+PyQt架构:使用设计师编写界面程序入门示例

        具体的配置方法可参考前面的文章 :

        这三个常用工具都可以在PyCharm的右键菜单中操作 ,功能简要说明如下:

        Qt Designer:可以在PyCharm中开发环境中快速打开设计师(Qt Designer)工具。

        PyUIC:将Qt Designer设计的”.ui”界面文件转换成”.py”文件。

        Rcc2Py:将Qt Designer设计中用到的资源文件”.qrc”文件转换成”.py”文件。

        软件界面使用设计师(Qt Designer)工具的设计过程

        1 、新建UI文件

        打开设计师 ,新建一个窗体 ,模板选择为Main Window,如下图所示,并保存为”Main.ui”文件:

        Python+PyQt架构:使用设计师编写界面程序入门示例

        2、新建资源文件

        在设计师的资源浏览器中新建一个资源文件保存名称为”MyRes.qrc”,将本例界面中用到的图标等资源文件添加到该文件中,如下图所示(前缀设置为空 ,图标文件保存在当前程序所在目录的img子文件夹下) :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        3、在动作编辑器编辑各种action

        菜单栏、工具栏上的大部分功能都可以通过动作编辑器完成,可以设置每个action的名称 、文本、快捷键、是否可选、工具提示等信息,本例中动作编辑完成后如下图所示:

        Python+PyQt架构:使用设计师编写界面程序入门示例

        4、菜单栏设计

        通过拖放前面创建的action ,可在设计师中完成菜单栏的设计,对于本例,设计完成后文件、选项-工具栏样式及选项-窗口视图菜单项分别如下图所示:

        Python+PyQt架构:使用设计师编写界面程序入门示例

        5 、工具栏设计

        同菜单栏设计过程类似通过拖放前面创建的action完成工具栏的设计,本例中工具栏编辑完成后如下图所示 :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        需要说明的是 ,本例工具栏还包括一个带下拉菜单的QToolButton控件,在设计师中不能直接将其放到工具栏区域中 ,后面需在代码中手动创建该控件 。

        6 、状态栏设计

        本例状态栏比较简单,只在状态栏中添加一个QLabel控件作一个简单的信息显示即可。同样,在设计师中不能直接将QLabel控件放到状态栏区域中,后面需在代码中手动创建该控件。

        7、主显示区域设计

        本例中,主显示区域分为左一右二的三个窗口,使用分割条进行布局 。为简单起见 ,本例使用三个”Plain Text Edit”控件作为显示窗口 。在设计师中拖放三个状态栏”Plain Text Edit”控件到主窗口区域中,分别命名为leftWnd 、rightWnd1和rightWnd2,同时,在属性编辑器设置三个控件的plainText属性分别为左窗口 、右窗口1 、右窗口2。然后选中rightWnd1和rightWnd2,在设计师中选择”使用分裂器垂直布局”,完成右面两个窗口的垂直布局 。然后再选中这个垂直布局和leftWnd窗口,在设计师中选择”使用分裂器水平布局”,这样使用水平分割条完成了整个界面左 、右两部分的水平布局。如下图所示:

        Python+PyQt架构:使用设计师编写界面程序入门示例

        8、信号/槽的设计

        在设计师的信号/槽编辑器中可完成信号与槽函数的关联 ,对于本例 ,将动作actExit关联到主窗口的关闭事件中,这样,在工具栏中点击退出按钮时,可退出该程序 ,如下图所示 :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        至此 ,在设计师中完成了整个界面的设计,保存文件。该界面中涉及到的所有界面对象元素如下图所示 :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        界面文件至Python文件的转换

        在设计师中界面设计完成后,我们得到了两个文件:”Main.ui”界面文件和”MyRes.qrc”资源文件,需将这两个文件转换为Python能够识别的文件,这就用到了前面提到的已经集成好的两个工具”PyUIC”和”Rcc2Py”。

        在PyCharm开发环境中 ,选中这两个文件 ,在右键菜单中分别选择”PyQt4–>PyUIC”和”PyQt4–>Rcc2Py”即可完成这两个文件的转换 。

        转换完成后,生成了两个新的文件 ,分别为界面文件”Ui_Main.py”和资源文件”MyRes_rc.py”。

        其中,”Ui_Main.py”文件中主要定义了一个界面布局类”Ui_MainWindow”,在该类中,会自动导入”MyRes_rc.py”的内容。

        主程序”Main.py”的编写

        在PyCharm开发环境中新建一个Python文件”Main.py”。其调用界面文件的主要思路为 :

        定义一个类MainWindow ,继承自QMainWindow和Ui_MainWindow类,在该类中实现设计师中不能完成的界面元素 ,如本例中工具栏上的下拉菜单按钮和状态栏上的label控件等,实现信号与槽函数的关联 ,完成槽函数的实现。

        MainWindow类的具体实现代码如下图所示 :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        对上述代码说明如下:

        第16-45行,类的初始化函数。

        第20-36行 ,添加设计师中不能完成的界面元素 ,详细请参考注释。

        第38-40行,实现两个动作与槽函数的关联,用以设置工具栏的样式和右边两个窗口是否可见。

        第42-45行 ,设置主分割条mainSplitter的左右两边的比例,并将其设置为主窗口的中心部件 。

        第47-57行 ,两个槽函数的具体实现 。

        程序的完整测试代码如下图所示  :

        Python+PyQt架构:使用设计师编写界面程序入门示例

        程序运行后,即可看到本文开头的提到的界面运行图 。

        备注

        本例开发环境配置:Python2.7 PyQt4。

        如果你觉得这篇文章对你有用的话 ,抖抖小手点个赞吧 。

        相关新闻

        联系我们
        联系我们
        分享本页
        返回顶部

          XML地图