diff --git a/.settings/org.eclipse.core.resources.prefs b/.settings/org.eclipse.core.resources.prefs index 61a4c71..34573b7 100644 --- a/.settings/org.eclipse.core.resources.prefs +++ b/.settings/org.eclipse.core.resources.prefs @@ -33,6 +33,7 @@ encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/cr encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/information.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/question.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/QMessageBox\u6837\u5F0F/\u65B9\u6848\u4E8C/warning.py=utf-8 +encoding//\u754C\u9762\u7F8E\u5316/QSS\u7F8E\u5316\u4F8B\u5B50/QPushButton\u6309\u94AE/ButtonHover.py=utf-8 encoding//\u754C\u9762\u7F8E\u5316/QScrollBar\u6EDA\u52A8\u6761\u6837\u5F0F/ScrollBar.py=utf-8 encoding//\u7A0B\u5E8F\u91CD\u542F/AutoRestart.py=utf-8 encoding//\u7A97\u53E3\u91CD\u542F/RestartMainWindow.py=utf-8 diff --git a/界面美化/QSS美化例子/QPushButton按钮/ButtonHover.py b/界面美化/QSS美化例子/QPushButton按钮/ButtonHover.py new file mode 100644 index 0000000..8b67107 --- /dev/null +++ b/界面美化/QSS美化例子/QPushButton按钮/ButtonHover.py @@ -0,0 +1,113 @@ +#!/usr/bin/env python +# -*- coding: utf-8 -*- + +''' +Created on 2018年1月29日 +@author: Irony."[讽刺] +@site: http://alyl.vip, http://orzorz.vip, https://coding.net/u/892768447, https://github.com/892768447 +@email: 892768447@qq.com +@file: ButtonHover +@description: +''' +import sys +from PyQt5.QtWidgets import QWidget, QHBoxLayout, QPushButton, QApplication + + +__Author__ = "By: Irony.\"[讽刺]\nQQ: 892768447\nEmail: 892768447@qq.com" +__Copyright__ = "Copyright (c) 2018 Irony.\"[讽刺]" +__Version__ = "Version 1.0" + +StyleSheet = ''' +/*这里是通用设置,所有按钮都有效,不过后面的可以覆盖这个*/ +QPushButton { + border: none; /*去掉边框*/ +} + +/* +QPushButton#xxx +或者 +#xx +都表示通过设置的objectName来指定 +*/ +QPushButton#RedButton { + background-color: #f44336; /*背景颜色*/ +} +#RedButton:hover { + background-color: #e57373; /*鼠标悬停时背景颜色*/ +} +/*注意pressed一定要放在hover的后面,否则没有效果*/ +#RedButton:pressed { + background-color: #ffcdd2; /*鼠标按下不放时背景颜色*/ +} + +#GreenButton { + background-color: #4caf50; + border-radius: 5px; /*圆角*/ +} +#GreenButton:hover { + background-color: #81c784; +} +#GreenButton:pressed { + background-color: #c8e6c9; +} + +#BlueButton { + background-color: #2196f3; + /*限制最小最大尺寸*/ + min-width: 96px; + max-width: 96px; + min-height: 96px; + max-height: 96px; + border-radius: 48px; /*圆形*/ +} +#BlueButton:hover { + background-color: #64b5f6; +} +#BlueButton:pressed { + background-color: #bbdefb; +} + +#OrangeButton { + max-height: 48px; + border-top-right-radius: 20px; /*右上角圆角*/ + border-bottom-left-radius: 20px; /*左下角圆角*/ + background-color: #ff9800; +} +#OrangeButton:hover { + background-color: #ffb74d; +} +#OrangeButton:pressed { + background-color: #ffe0b2; +} + +/*根据文字内容来区分按钮,同理还可以根据其它属性来区分*/ +QPushButton[text="purple button"] { + color: white; /*文字颜色*/ + background-color: #9c27b0; +} +''' + + +class Window(QWidget): + + def __init__(self, *args, **kwargs): + super(Window, self).__init__(*args, **kwargs) + layout = QHBoxLayout(self) + layout.addWidget(QPushButton("red button", self, + objectName="RedButton", minimumHeight=48)) + layout.addWidget(QPushButton("green button", self, + objectName="GreenButton", minimumHeight=48)) + layout.addWidget(QPushButton("blue button", self, + objectName="BlueButton", minimumHeight=48)) + layout.addWidget(QPushButton("orange button", self, + objectName="OrangeButton", minimumHeight=48)) + layout.addWidget(QPushButton("purple button", self, + objectName="PurpleButton", minimumHeight=48)) + + +if __name__ == "__main__": + app = QApplication(sys.argv) + app.setStyleSheet(StyleSheet) + w = Window() + w.show() + sys.exit(app.exec_()) diff --git a/界面美化/QSS美化例子/QPushButton按钮/README.md b/界面美化/QSS美化例子/QPushButton按钮/README.md new file mode 100644 index 0000000..1dfd0da --- /dev/null +++ b/界面美化/QSS美化例子/QPushButton按钮/README.md @@ -0,0 +1,8 @@ +# QPushButton 按钮 QSS 美化样式 + +主要改变背景颜色、鼠标按下颜色、鼠标悬停颜色、圆角、圆形、文字颜色 + +效果图: + +### [ButtonHover.py](ButtonHover.py) +![ButtonHover](ScreenShot/ButtonHover.gif) \ No newline at end of file diff --git a/界面美化/QSS美化例子/QPushButton按钮/ScreenShot/ButtonHover.gif b/界面美化/QSS美化例子/QPushButton按钮/ScreenShot/ButtonHover.gif new file mode 100644 index 0000000..0820536 Binary files /dev/null and b/界面美化/QSS美化例子/QPushButton按钮/ScreenShot/ButtonHover.gif differ diff --git a/界面美化/README.md b/界面美化/README.md index e7a4c3a..2b3f538 100644 --- a/界面美化/README.md +++ b/界面美化/README.md @@ -1,6 +1,7 @@ # 通过QSS或者重绘对界面进行美化 ### [1.QSS美化例子](QSS美化例子/) + - [1.1 QPushButton按钮](QPushButton按钮/) ### [2.QMessageBox样式](QMessageBox样式/) - [2.1 方案一](QMessageBox样式/方案一)