Python桌面图形程序美化的方法论

喜欢ヅ旅行 2022-10-09 00:53 168阅读 0赞

击上方“**Python爬虫与数据挖掘**”，进行关注

回复“**书籍**”即可获赠Python从入门到进阶共10本电子书

今

日

鸡

汤

千寻铁锁沉江底，一片降幡出石头。

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

## 功能性是开发的第一要务 ##

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

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

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

![null][]

## 模块提供的都是原生组件 ##

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

![null][null 1]

*  PyQt5 中的各种控件（QPushButton、QLineEdit、QCheckBox等）对应于 HTML 中的各类元素标签（`<a>`、`<p>`、`<h>`），用于基础结构的编排。
 *  PyQt5 中的 QSS 对应于 HTML 中的 CSS，用于对样式的控件。
 *  PyQt5 中的信号槽 对应于 HTML 中的 JavaScript，用于对行为交互的控制。

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

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

![null][null 2]

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

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

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

![null][null 3]

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

![null][null 4]

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

## 界面的美化的几个关键点 ##

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

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

### 有一个好的设计原型 ###

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

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

![f08a1162d4858c4afb456ef8bb88e43a.png][]

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

### 充分利用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()是进度栏控件，它的默认样式如下图所示：

![null][null 5]

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

![null][null 6]

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

*  `setAlignment()`：用于设置进度条的对其方式；
 *  `setFormat()`：用于设置进度条的文本格式；
 *  `setInvertedAppearance()`：用于设计进度条是否反转增长；
 *  `setMaximum()`：用于设置进度条的最大值；
 *  `setMinimum()`：用于设置进度条的最小值；
 *  `setOrientation()`：用于设置进度条的布局，是水平还是垂直；

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

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

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

![ccb42d23e5390255106ce13fbec05af3.png][]

**---\--\---\---\---\--\---** End **---\--\---\--\---\---\--\-**

往期精彩文章推荐：

*  ## [使用Scrapy网络爬虫框架小试牛刀][Scrapy] ##
 *  ## [一篇文章教会你使用Python下载抖音无水印视频][Python] ##
 *  ## [手把手教你用Python打造一款属于你自己的个性二维码][Python 1]    ##

![7ae48bbacf8a978a2fc9302447fb791c.png][]

欢迎大家**点赞，****留言，****转发，转载，**感谢大家的相伴与支持

想加入Python学习群请在后台回复【**入群**】

万水千山总是情，点个【**在看**】行不行

**/今日留言主题/**

随便说一两句吧~~

[null]: /images/20221005/760d6d7e87ec4a499e1f869a29d0aca9.png
[null 1]: /images/20221005/10b951a1b8534049981cae776c75a8a3.png
[null 2]: /images/20221005/9df460ef42d5439bb922d74498523aa9.png
[null 3]: /images/20221005/b5c5d34066024085949f740d19a718a4.png
[null 4]: /images/20221005/db5019dc9695484397c97102a5df7070.png
[f08a1162d4858c4afb456ef8bb88e43a.png]: /images/20221005/92a903e7f5fd4fe4b5664aafe027476c.png
[null 5]: /images/20221005/fe42bed791cd4b9cae79e2da4b0a5c27.png
[null 6]: /images/20221005/5b1b3b3156db47c2b999f6eb26b5f362.png
[ccb42d23e5390255106ce13fbec05af3.png]: /images/20221005/8af54efd9092485c9cd3685a1c6644d3.png
[Scrapy]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0a420cbb72d3628ac585c84fc90b96c6ecac1ac9cfad631c2bfaaa47ee65689c57ea21c86&idx=1&mid=2247492107&scene=21&sn=71da625bf6457b39d9d3d949bd6e2fc1#wechat_redirect
[Python]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc0a7accbb72eba14ab8987ba8bb17f965ad7b9e9bd1affebaf0edcfe36f7cfe0c3d3158e08&idx=1&mid=2247491975&scene=21&sn=a8f6803f3b1bdb3f22933623e709c176#wechat_redirect
[Python 1]: http://mp.weixin.qq.com/s?__biz=MzU3MzQxMjE2NA%3D%3D&chksm=fcc3595ccbb4d04a47709c878f5f48d590ae3b0c8c06530944fec0f8e113b04a368d22c2550e&idx=1&mid=2247491447&scene=21&sn=007aa46f8f5e223e8a893070481bb704#wechat_redirect
[7ae48bbacf8a978a2fc9302447fb791c.png]: /images/20221005/365cdf13189843afaa496195ae348409.png