很多人都吐槽,使用 Tkinter、PyQt5等工具制作出来的图形界面程序太丑了。既然觉得它丑,我们来想想,它为什么会那么丑。

文章目录

功能性是开发的第一要务

模块提供的都是原生组件

界面的美化的几个关键点

功能性是开发的第一要务

每一个 Python 图形界面库都有它自有的功能特性和界面特性。一般来说,这些库的开发者着重要考虑的是功能性的实现。比如、列表框、拖拽框、悬浮框、自定义控件、webview等。

一个图形界面库,受不受开发者的欢迎,首先在于它提供的功能是否全面和强大。

如果仅仅是炫酷和好看,如果功能上有所缺失,其应用也只能在小范围和特定领域内得到拥簇。会导致一种“初遇时惊艳,永久后坑多”的状态。

模块提供的都是原生组件

为了便于理解,我们在这里把桌面图形界面的开发(以PyQt5为例)和Web前端开发进行一下不严谨的关联对应。

PyQt5 中的各种控件(QPushButton、QLineEdit、QCheckBox等)对应于 HTML 中的各类元素标签( 、

、 ),用于基础结构的编排。

PyQt5 中的 QSS 对应于 HTML 中的 CSS,用于对样式的控件。

PyQt5 中的信号槽 对应于 HTML 中的 JavaScript,用于对行为交互的控制。

在不引入任何 CSS 和 JavaScript 的情况下,HTML 中编写的任何标签,在浏览器中显示的都是最原始的形状和样式。

州的先生

一个按钮

一个选项

两个选项

上述 HTML 代码在浏览器中将会显示为如下图所示:

是不是也是很丑不美观?那就对了。没有经过样式定义的 HTML 标签元素就是这样丑。

而现代Web开发中,几乎所有页面的元素标签都是依照设计原型,引用 UI 组件或自写CSS,对界面的外观进行美化的。

下图是比较知名的前端 UI 库 ElementUI 提供的按钮组件:

通过审查元素,可以看到,其用 CSS 对按钮元素进行了很多改造:

同理,在 Python 的图形界面开发中,我们仅仅是使用了库提供的原生控件和布局,将一个图形界面元素的基础框架构建出来了,并没有对其样式进行任何美化和修饰。这样编写出来的图形界面程序,肯定会让人觉得丑。

界面的美化的几个关键点

通过上面对 Web 页面的对应,我们知道了我们编写的图形界面程序为什么不美观。

如何解决,州的先生根据实际经验给出如下的建议:

有一个好的设计原型

不是要大家去兼修 UI 设计,而是在构建一个图形界面之前,对程序的布局,结构有一个清晰明确的原型。就算是使用网格布局,也应该设计好各个控件在网格的位置和距离。

在有原型之后,可以参考一下现有的消费端桌面软件(QQ音乐之类的)或者上站酷之类的设计网站上看看专业 UI 设计师作品的样式和色彩搭配。

在这里,色彩搭配是一个雷区。好的色彩搭配让程序界面赏心悦目,差的色彩搭配,让人觉得粗制滥造。

充分利用QSS

Qt 提供了 QSS 这个特性让开发者可以自定义小部件的外观,其支持各种属性、子状态和控件。

充分利用好 QSS 来配置界面,图形界面的美化工作可以完成 80% 到 90%。

QSS 支持很多种控件进行配置,由于列表过长,在此就不一一列举出来。贴出 Qt 官方文档中关于 Qt Style Sheets Reference 的链接,大家可以在上面查看:

https://doc.qt.io/qt-5/stylesheet-reference.html

同时,Qt 官方文档中还提供了很多控件使用 QSS 美化的示例,大家也可以参考一下,链接为:

https://doc.qt.io/qtforpython/overviews/stylesheet-examples.html

利用控件的自有属性

QSS 能够完成 80% 到 90% 的界面美化工作,但是还有 10% 到 20% 的场景,QSS 表示心有余而力不足。

什么场景呢?比如窗口边框的处理、窗口默认三剑客(最小化、最大化、关闭)的处理。

面对这一类的处理,就得利用各个控件的自有属性来配置了。如果知道控件的自有属性有哪些呢?答案当然还是看文档。在此个例子:

QProgressBar()是进度栏控件,它的默认样式如下图所示:

我们在官方文档中可以看到它有如下的方法可供调用:

显然,那几个 set 开头的方法,就是可以直接对控件进行配置的方法:

setAlignment()

setFormat()

setInvertedAppearance()

setMaximum()

setMinimum()

setOrientation()

这样,通过控件的自有属性,我们可以对控件的那些QSS无法处理的基础样式进行自定义。

总而言之,需要多翻阅文档。

最后,用一个 PyQt5 美化的音乐播放器界面镇文,希望大家编写的图形界面程序都德艺双馨,秀外慧中。

python复杂美观的图形界面_Python图形界面美化的方法论相关推荐

  1. python软件运行界面_python运行界面 python的图形用户界面怎么运行

    为什么用Python开发界面应用程序 1)wxWidgets是一个比MFC优雅的库,TortoiseCVS用wxWidges而不用MFC,就是因为wxWidgets好用,而不是为了可以移植. 2)Py ...

  2. python制作软件界面_Python图形界面GUI程序设计

    1.GUI是什么? 图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面. 图形用户界面是一种人与计算机通信的界面显 ...

  3. python 图形模块_Python图形模块

    Hi-im正在尝试使用johnzelles简单图形模块导入创建一个大小为100x100像素的python图形窗口.在 下面是我需要在图形窗口中重新创建的项目,我只是在寻找如何开始这方面的提示,因为我不 ...

  4. python实现监控数据界面_python 监控界面

    MySQL MTOP - 开源 MySQL 企业监控系统 MySQLMTOP是一个由Python+PHP开发的MySQL企业级监控系统.系统由Python实现多进程数据采集和告警,PHP实现WEB展示 ...

  5. python 写一个带有菜单界面_python菜单界面

    广告关闭 腾讯云11.11云上盛惠 ,精选热门产品助力上云,云服务器首年88元起,买的越多返的越多,最高返5000元! 在python中有多个图形界面开发的库,一般我们会见到用到的有tkinter,p ...

  6. python如何进入编程界面_Python可视化界面编程入门

    Python可视化界面编程入门具体实现代码如所示: (1)普通可视化界面编程代码入门: import sys from PyQt5.QtWidgets import QWidget,QApplicat ...

  7. python简单可视化聊天界面_Python可视化界面

    可视化界面程序,本来不想写,只在console台运行就好,但是后来很多小伙伴都有这样的需求: 需要从redis中删除某个key的value,然后需要跟key去查,有些小伙伴不会用redis,就产生如下 ...

  8. python做数据库界面_python数据库界面设计

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...

  9. python做数据库界面_python 数据库界面设计

    {"moduleinfo":{"card_count":[{"count_phone":1,"count":1}],&q ...

最新文章

  1. 负载均衡服务器nginx详细安装教程及网络部署
  2. C1之路 | 训练任务01-进制与信息编码
  3. # Consumed parameters
  4. HTML5实战 学习笔记
  5. 谈谈NiTE 2手部跟踪在彩色图像上的显示
  6. *【CF#633B】 A Trivial Problem(二分或枚举)
  7. scrapy pipelines.py
  8. 4月第3周业务风控关注 | 文化部再次审查直播和游戏产品,已下架4939款直播应用...
  9. 【迅速上手】Python 画图 —— 柱状图
  10. php 模块不存在,模块不存在:index.php?
  11. 百度飞桨PaddlePaddle 顶会论文复现课程 阅读心得 BigGAN
  12. python3爬虫(2):使用Selenium爬取百度文库word文章
  13. 微信支付系列(三)之二维码扫码支付
  14. 彭佳慧 - 走在红毯那一天
  15. 7-5 循环日程表 (10 分)
  16. diy 单片机 自动浇花_基于单片机的自动浇花系统的设计
  17. 用户情绪:愉悦和不爽
  18. 网页自动弹窗被拦截 html,JS弹出新窗口被拦截的解决方法
  19. 送你40+电子厂软测面试真题(需要答案私聊)
  20. 高效管理,OA系统如何做到?

热门文章

  1. [STC89C52RC]LCD1602液晶屏显示
  2. (八)、管理向基于模型的设计的转变
  3. 【汇编语言】转移指令循环指令
  4. 只有安卓系统的浏览器提示证书不受信任的问题 ----- 证书链不完整的解决办法
  5. win10 移动文件夹和移动文件
  6. Flink的窗口计算案例
  7. 4.5 星历(历书)解码
  8. Unsupervised Monocular Depth and Ego-motion Learning with Structure and Semantics 之论文详解
  9. 开源即时通讯IM框架 MobileIMSDK v6.3 发布
  10. VirtualBox命令行VBoxManage创建与管理虚拟机教程