125 lines
4.2 KiB
Markdown
125 lines
4.2 KiB
Markdown
# 界面美化
|
||
|
||
## [QCalendarWidget](QCalendarWidget/)
|
||
|
||
对日历控件的部分控件进行QSS美化,顶部背景颜色和高度,上下月按钮、月份选择、年选择、菜单
|
||
[CalendarWidget.py](QCalendarWidget/CalendarWidget.py)
|
||
|
||
![截图](QCalendarWidget/ScreenShot/CalendarWidget.gif)
|
||
|
||
## [QFileSystemModel](QFileSystemModel/)
|
||
|
||
修改`QFileSystemModel`的文件类型图标
|
||
|
||
使用`QFileSystemModel.setIconProvider(QFileIconProvider)`来设置图标提供类
|
||
|
||
通过重写`QFileIconProvider`的`icon`方法来决定返回什么样的图标
|
||
|
||
见需求 [Issues#2](https://github.com/PyQt5/PyQt/issues/2)
|
||
|
||
![截图](QFileSystemModel/ScreenShot/FileSystemModel.png)
|
||
|
||
## [QLabel](QLabel/)
|
||
|
||
### 1. [圆形图片](QLabel/圆形图片.py)
|
||
|
||
使用`QPainter`的`setClipPath`方法结合`QPainterPath`对图片进行裁剪从而实现圆形图片。
|
||
|
||
![截图](QLabel/ScreenShot/圆形图片.png)
|
||
|
||
## [QMessageBox](QMessageBox/)
|
||
|
||
美化按钮以及增加图片显示
|
||
|
||
### 1. [方案一](QMessageBox/方案一)
|
||
1. 该方案使用`dialogbuttonbox-buttons-have-icons: 1;`开启自带的图标样式
|
||
2. 再利用`dialog-xx-icon: url();`来设置自定义的图标, 具体参考[list-of-icons](http://doc.qt.io/qt-5/stylesheet-reference.html#list-of-icons)
|
||
3. 缺点 部分按钮图标无效,无法自定义不同按钮的颜色
|
||
|
||
![截图](QMessageBox/方案一/ScreenShot/information.png)
|
||
|
||
### 2. [方案二](QMessageBox/方案二)
|
||
1. 采用样式表中的属性选择器`QPushButton[text="xxx"]`可以根据按钮中的文字来区分
|
||
2. 在利用属性样式`qproperty-icon: url();`来设置自定义图标
|
||
3. 解决方案一的缺点
|
||
|
||
![截图](QMessageBox/方案二/ScreenShot/information.png)
|
||
|
||
## [QProgressBar](QProgressBar/)
|
||
|
||
各种进度条的美化和自定义
|
||
|
||
### 1. [简单样式表美化](QProgressBar/简单样式表美化.py)
|
||
主要改变背景颜色、高度、边框、块颜色、边框、圆角
|
||
|
||
![截图](QProgressBar/ScreenShot/简单样式表美化.gif)
|
||
|
||
### 2. [水波纹进度条](QProgressBar/水波纹进度条/)
|
||
|
||
![截图](QProgressBar/水波纹进度条/ScreenShot/水波纹进度条.gif)
|
||
|
||
### 3. [圆圈进度条](QProgressBar/圆圈进度条.py)
|
||
|
||
![截图](QProgressBar/ScreenShot/圆圈进度条.gif)
|
||
|
||
### 4. [百分比进度条](QProgressBar/百分比进度条.py)
|
||
|
||
![截图](QProgressBar/ScreenShot/百分比进度条.gif)
|
||
|
||
### 5. [Metro进度条](QProgressBar/Metro进度条.py)
|
||
|
||
![截图](QProgressBar/ScreenShot/Metro进度条.gif)
|
||
|
||
## [QPushButton](QPushButton/)
|
||
|
||
### 1. [按钮常见样式](QPushButton/按钮常见样式.py)
|
||
|
||
主要改变背景颜色、鼠标按下颜色、鼠标悬停颜色、圆角、圆形、文字颜色
|
||
|
||
![截图](QPushButton/ScreenShot/按钮常见样式.gif)
|
||
|
||
### 2. [按钮进度动画](QPushButton/按钮进度动画)
|
||
|
||
1. [按钮字体旋转动画](QPushButton/按钮进度动画/按钮字体旋转动画.py)
|
||
|
||
利用字体,使用FontAwesome字体来显示一个圆形进度条,然后利用旋转动画
|
||
|
||
![截图](QPushButton/按钮进度动画/ScreenShot/按钮字体旋转动画.gif)
|
||
|
||
2. [按钮底部线条动画](QPushButton/按钮进度动画/按钮底部线条动画.py)
|
||
|
||
在按钮下方画一条线,根据百分值绘制
|
||
|
||
![截图](QPushButton/按钮进度动画/ScreenShot/按钮底部线条动画.gif)
|
||
|
||
## [QScrollBar](QScrollBar/)
|
||
|
||
使用QSS和图片对滚动条进行美化
|
||
|
||
![截图](QScrollBar/ScreenShot/1.jpg)![截图](QScrollBar/ScreenShot/2.jpg)
|
||
|
||
## [QSlider](QSlider/)
|
||
|
||
### 1. [通过QSS美化](QSlider/QssQSlider.py)
|
||
![截图](QSlider/ScreenShot/QssQSlider.gif)
|
||
|
||
### 2. [paintEvent绘制](QSlider/PaintQSlider.py)
|
||
![截图](QSlider/ScreenShot/PaintQSlider.gif)
|
||
|
||
## [Effect](Effect/)
|
||
特效
|
||
|
||
### 1. [图片按钮输入框阴影](Effect/图片按钮输入框阴影.py)
|
||
1.通过`setGraphicsEffect`设置控件的边框阴影
|
||
2.继承`QGraphicsDropShadowEffect`实现增加动态属性`radius`
|
||
3.通过`QPropertyAnimation`属性动画不断改变`radius`的值并调用`setBlurRadius`更新半径值
|
||
|
||
![截图](Effect/ScreenShot/图片按钮输入框阴影.gif)
|
||
|
||
## [QWidget](QWidget/)
|
||
解决继承后的QWidget无法设置样式
|
||
|
||
- 1.重写paintEvent
|
||
- 2.设置Qt.WA_StyledBackground属性
|
||
|
||
![截图](QWidget/ScreenShot/QWidget样式测试.png)
|