Qt Designer设计软件主界面实战

鳄鱼君Ba

发表文章数:519

Vieu四代商业主题

高扩展、安全、稳定、响应式布局多功能模板。

¥69 现在购买
首页 » Python教程 » Qt Designer设计软件主界面实战

整个界面共有三个按钮以及微博的背景图,这三个按钮分别是发布采集相关服务,当分别单击这三个按钮的时候,软件就会自动切换到相应的功能界面。

根据软件效果图,打开QT Designer设计器来设计软件主界面。在Qt Designer可以看到一个新建窗口的界面,有5种功能模板可供选择,Qt Designer新建窗口:

Qt Designer设计软件主界面实战

虽然新建窗口提供5种功能模板,但实际上只有3种不同类型的模板,分别是DialogMainWindowWidget,三者作用如下:
(1)MainWindow是主界面,一个窗口是父/子hiearchy的顶部,通常显示标题栏和边框。底层窗口系统(Windows、KDE、GNOME等)将为窗口提供策略,如标题栏/边框样式、布局和焦点等。
(2)Widget是小部件,是屏幕上的一个矩形区域,用于显示和用户交互,包括按钮、滑块、视图、对话框和窗口等。所有窗口小部件将在屏幕上显示某些内容,许多窗口小部件也将接受来自键盘或鼠标的用户输入。“widget”一词来自UNIX,在Windows中称为“控件”。
(3)Dialog为对话框,通常是临时的,可以设置不同的标题栏外观,主要用于通知或收集输入窗口,并且底部或右侧通常具有OK、Cancel等按钮。

Qt Designer设计软件主界面实战

选择Widget并创建模版,将其作为软件的主界面,在QT Designer界面里分为5个区域,正中间区域是软件设计的界面,左右两侧是功能区域,功能区域的说明如下:
● 区域1:控件区,软件的功能控件都在此区域生成,可以拖来控件到模板上实现可视化软件设计。
● 区域2:软件的目录结构,显示模板中所有控件的类型,能帮助设计者快速找到控件。
● 区域3:控件属性区,主要修改控件的属性。
● 区域4:信号(Signal)/槽(Slot),信号和槽是Qt编程中对象间的通信机制。简单地说,就是单击按钮时候所触发的事件。单击按钮称之为信号,触发的事件称之为槽。

软件主界面的背景图和三个按钮分别由QFrameQPushButton控件实现,在左侧的控件区里拖拉Frame和Push Button到正中间区域,并对每个控件的styleSheet属性进行配置,将文件目录的ico文件夹的ico图标加载到QFrame和QPushButton

Qt Designer设计软件主界面实战

控件的styleSheet属性值是固定的语法,貌似跟CSS样式的语法差不多。不同的控件只需改变ico的文件名即可,比如QFrame控件是放置微博背景图,即项目文件夹ico的bg.jpg文件。将设计好的界面保存为weibo_main.ui,该文件就是项目目录的weibo_main.ui文件。

在PyCharm左侧的文件目录下,选中weibo_main.ui文件并右键选择“External Tool”→“PyUIC”,PyCharm会自动执行Python指令,将ui文件转换py文件,即项目文件weibo_main.py

在weibo_main.py文件里定义了Ui_Form类类方法setupUiretranslateUi是将QT Designer设计的界面以Python的代码表示。weibo_main.py的代码无需修改,若要改动界面设计,只需在QT Designer重新设计weibo_main.ui文件,然后将weibo_main.ui文件转换weibo_main.py文件即可。

weibo_main.py文件是以Python的代码来描述软件界面的设计逻辑,如果要将界面呈现出来,还需要编写相应的功能代码,这些功能代码在main.py文件里实现,具体的代码如下:

from PyQt5 import QtCore,QtGui,QtWidgets
from weibo_main import Ui_Form
from service import weibo_service_logic
from collect import weibo_collect_logic
from release import weibo_release_logic
import sys

# 软件主界面
class main_windows(QtWidgets.QWidget,Ui_Form):
    # 自定义初始化函数
    def __init__(self,parent=None):
        super(main_windows,self).__init__(parent)
        self.setupUi(self)
        # 设置LOGO和图片
        self.setWindowIcon(QtGui.QIcon('./ico/logo.png'))
    # 定义界面运行函数
    def show_win(self):
        # setFixedSize固定界面大小
        self.setFixedSize=(self.width(),self.height())
        # 将最大化按钮设置为不可用
        self.setWindowFlag(QtCore.Qt.WindowMaximizeButtonHint,False)
        self.show()
    # 定义界面关闭函数
    def close_win(self):
        self.close()
if __name__ == '__main__':
    # 实例化pyqt5对象
    app=QtWidgets.QApplication(sys.argv)
    # 实例化软件主界面
    win=main_windows()
    # 其他功能界面的实例化对象
    service=weibo_service_logic()
    collect=weibo_collect_logic()
    release=weibo_release_logic()

    # 显示软件主界面
    win.show_win()
    # 软件主界面的按钮绑定功能函数
    win.main_proxy.clicked.connect(win.close_win)
    win.main_proxy.clicked.connect(service.show_win)
    # 微博采集
    win.main_collect.clicked.connect(win.close_win)
    win.main_collect.clicked.connect(collect.show_win)
    # 微博发布
    win.main_release.clicked.connect(win.close_win)
    win.main_release.clicked.connect(release.show_win)

    # 其它功能界面的“主菜单”按钮绑定功能函数
    collect.main_win.clicked.connect(collect.close_win)
    collect.main_win.clicked.connect(win.show_win)
    release.main_win.clicked.connect(release.close_win)
    release.main_win.clicked.connect(win.show_win)
    service.main_win.clicked.connect(service.close_win)
    service.main_win.clicked.connect(win.show_win)
    
    # 软件结束运行
    sys.exit(app.exec_())

整段代码分为两大部分:定义main_windows类设置文件运行入口,具体说明如下:

(1)main_windows类是继承weibo_main.py文件的Ui_Form类,使main_windows类具有Ui_Form类的全部特性,并自定义初始化方法__init__、类方法show_win和close_win,这些方法可进一步完善软件主界面的功能。

(2)设置文件运行入口是通过if__name__==’__main__’实现,首先创建PyQt5的实例化对象app以及各个界面的实例化对象,然后在各个界面的“主菜单”按钮绑定功能函数,比如在主界面单击“采集”按钮就会进入微博采集界面,并关闭软件主界面,这个单击操作涉及了两个功能,分别是运行微博采集界面和关闭主界面,相应的代码及说明如下:

# 关闭软件主界面
    # main_collect是主界面的采集ann
    win.main_collect.clicked.connect(win.close_win)
    # 运行微博采集界面
    # collect.show_win的collect是微博采集界面的实例化对象
    # show_win是该对象下定义的函数
    win.main_collect.clicked.connect(collect.show_win)

未经允许不得转载:作者:鳄鱼君Ba, 转载或复制请以 超链接形式 并注明出处 鳄鱼君Ba
原文地址:《Qt Designer设计软件主界面实战》 发布于2020-06-13

分享到:
赞(0) 赏杯咖啡

评论 抢沙发

3 + 7 =


文章对你有帮助可赏作者一杯咖啡

支付宝扫一扫打赏

微信扫一扫打赏

Vieu4.6主题
专业打造轻量级个人企业风格博客主题!专注于前端开发,全站响应式布局自适应模板。
切换注册

登录

忘记密码 ?

您也可以使用第三方帐号快捷登录

Q Q 登 录
微 博 登 录
切换登录

注册