第三节 让界面变优雅 ！

目录

一、初始界面

二、界面美化

方法

按钮美化

1. 编写的位置

2. 语法

3. 效果

加深理解 —— 界面背景颜色及透明度的修改

1. 背景颜色修改

2. 透明度的修改

3. 效果

三、 小结

---

 

一、初始界面

• 上一篇文章介绍了如何用 python 的 PyQt 和 PyInstaller 来开发软件，但是很明显，界面并不美观：
  

• 这么丑的界面是没办法拿出去使用的，那么这篇文章就交给大家如何来美化界面！

二、界面美化

方法

• 这里先提一下网页的制作，静态页面用 html 语言来编写，而一些特别的视觉效果则需要借助 js 和 css 语言。和 css 类似，PyQt 也支持一种样式表语言 —— qss ，并且语言格式和 css 几乎相同，只不过功能上没有 css 强大。

• 下面以按钮的美化为例来说明 qss 的使用

按钮美化

 

1. 编写的位置

• 首先新建一个 py 文件，并把 demo.py 的内容复制进去。之所以不直接在 demo.py 中修改，是因为如果之后又修改了 ui 文件的话，那么转译来的 demo.py 也会更新，这样我们写的 qss 就没了。
• 找到对应控件的代码，比如我们这次要美化按钮，那么就找到按钮代码所在的位置：
  

2. 语法

• 找到之后就在这后面编写 qss 代码就行了，格式如下：
  self.<控件的objectName>.setStyleSheet(<控件所属的类>{ qss代码块; })
• 比如这里按钮控件的 objectName 是 pushButton ，按钮控件所属的类是 QPushButton ，我们要给按钮修改背景颜色、字体颜色并将按钮的直角改为圆角，那么我们可以使用下面的代码：
  self.pushButton.setStyleSheet("QPushButton{color:white; background:#5E72E4; border-radius:36px;}")

3. 效果

• 运行后可以看到效果如下：
  

加深理解 —— 界面背景颜色及透明度的修改

1. 背景颜色修改

• 和之前的格式一样，这里我们背景的 objectName 是 centralwidget ，所属的类是 QWidget ， 那么修改背景颜色的代码如下：

self.centralwidget.setStyleSheet("QWidget{background: #F5ECE7;}")

2. 透明度的修改

• 这里我们需要在 demo_run.py 的 init 函数下修改，代码如下：

self.setWindowOpacity(0.9)

3. 效果

三、 小结

可以看出，添加了 qss 样式表后，界面的美观程度得到了一定的提升。当然，想写出更耐看的界面，还需要进行更多的学习和练习。