MainWindow
当前位置:   article > 正文

PyQt5 按钮Buttons样式设计_pyqt5 按钮样式

pyqt5 按钮样式

效果截图:

 PyQt 模型设计:

PyQt 设计器截图:

*.ui 源码:

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <ui version="4.0">
  3. <class>MainWindow</class>
  4. <widget class="QMainWindow" name="MainWindow">
  5. <property name="geometry">
  6. <rect>
  7. <x>0</x>
  8. <y>0</y>
  9. <width>800</width>
  10. <height>600</height>
  11. </rect>
  12. </property>
  13. <property name="windowTitle">
  14. <string>MainWindow</string>
  15. </property>
  16. <widget class="QWidget" name="centralwidget">
  17. <widget class="QWidget" name="horizontalLayoutWidget">
  18. <property name="geometry">
  19. <rect>
  20. <x>20</x>
  21. <y>30</y>
  22. <width>478</width>
  23. <height>80</height>
  24. </rect>
  25. </property>
  26. <layout class="QHBoxLayout" name="horizontalLayout">
  27. <item>
  28. <widget class="QPushButton" name="pushButton_5">
  29. <property name="minimumSize">
  30. <size>
  31. <width>0</width>
  32. <height>48</height>
  33. </size>
  34. </property>
  35. <property name="text">
  36. <string>PushButton</string>
  37. </property>
  38. </widget>
  39. </item>
  40. <item>
  41. <widget class="QPushButton" name="pushButton_4">
  42. <property name="minimumSize">
  43. <size>
  44. <width>0</width>
  45. <height>48</height>
  46. </size>
  47. </property>
  48. <property name="text">
  49. <string>PushButton</string>
  50. </property>
  51. </widget>
  52. </item>
  53. <item>
  54. <widget class="QPushButton" name="pushButton_3">
  55. <property name="minimumSize">
  56. <size>
  57. <width>0</width>
  58. <height>48</height>
  59. </size>
  60. </property>
  61. <property name="text">
  62. <string>PushButton</string>
  63. </property>
  64. </widget>
  65. </item>
  66. <item>
  67. <widget class="QPushButton" name="pushButton_2">
  68. <property name="minimumSize">
  69. <size>
  70. <width>0</width>
  71. <height>48</height>
  72. </size>
  73. </property>
  74. <property name="text">
  75. <string>PushButton</string>
  76. </property>
  77. </widget>
  78. </item>
  79. <item>
  80. <widget class="QPushButton" name="pushButton">
  81. <property name="minimumSize">
  82. <size>
  83. <width>0</width>
  84. <height>48</height>
  85. </size>
  86. </property>
  87. <property name="text">
  88. <string>PushButton</string>
  89. </property>
  90. </widget>
  91. </item>
  92. </layout>
  93. </widget>
  94. </widget>
  95. </widget>
  96. <resources/>
  97. <connections/>
  98. </ui>

 *.ui 转换为*.py 代码

  1. # -*- coding: utf-8 -*-
  2. # Form implementation generated from reading ui file 'untitled1.ui'
  3. #
  4. # Created by: PyQt5 UI code generator 5.15.4
  5. #
  6. # WARNING: Any manual changes made to this file will be lost when pyuic5 is
  7. # run again. Do not edit this file unless you know what you are doing.
  8. import sys
  9. from PyQt5 import QtCore, QtGui, QtWidgets
  10. from PyQt5.QtWidgets import QApplication, QMainWindow
  11. StyleSheet = """
  12. /*这里是通用设置,所有按钮都有效,不过后面的可以覆盖这个*/
  13. QPushButton {
  14. border: none; /*去掉边框*/
  15. }
  16. /*
  17. QPushButton#xxx
  18. 或者
  19. #xx
  20. 都表示通过设置的objectName来指定
  21. */
  22. QPushButton#pushButton {
  23. background-color: #f44336; /*背景颜色*/
  24. }
  25. #pushButton:hover {
  26. background-color: #e57373; /*鼠标悬停时背景颜色*/
  27. }
  28. /*注意pressed一定要放在hover的后面,否则没有效果*/
  29. #pushButton:pressed {
  30. background-color: #ffcdd2; /*鼠标按下不放时背景颜色*/
  31. }
  32. #pushButton_2 {
  33. background-color: #4caf50;
  34. border-radius: 5px; /*圆角*/
  35. }
  36. #pushButton_2:hover {
  37. background-color: #81c784;
  38. }
  39. #pushButton_2:pressed {
  40. background-color: #c8e6c9;
  41. }
  42. #pushButton_3 {
  43. background-color: #2196f3;
  44. /*限制最小最大尺寸*/
  45. min-width: 96px;
  46. max-width: 96px;
  47. min-height: 96px;
  48. max-height: 96px;
  49. border-radius: 48px; /*圆形*/
  50. }
  51. #pushButton_3:hover {
  52. background-color: #64b5f6;
  53. }
  54. #pushButton_3:pressed {
  55. background-color: #bbdefb;
  56. }
  57. #pushButton_4 {
  58. max-height: 48px;
  59. border-top-right-radius: 20px; /*右上角圆角*/
  60. border-bottom-left-radius: 20px; /*左下角圆角*/
  61. background-color: #ff9800;
  62. }
  63. #pushButton_4:hover {
  64. background-color: #ffb74d;
  65. }
  66. #pushButton_4:pressed {
  67. background-color: #ffe0b2;
  68. }
  69. /*根据文字内容来区分按钮,同理还可以根据其它属性来区分*/
  70. #pushButton_5 {
  71. color: white; /*文字颜色*/
  72. background-color: #9c27b0;
  73. }
  74. """
  75. class Ui_MainWindow(object):
  76. def setupUi(self, MainWindow):
  77. MainWindow.setObjectName("MainWindow")
  78. MainWindow.resize(800, 600)
  79. self.centralwidget = QtWidgets.QWidget(MainWindow)
  80. self.centralwidget.setObjectName("centralwidget")
  81. self.horizontalLayoutWidget = QtWidgets.QWidget(self.centralwidget)
  82. self.horizontalLayoutWidget.setGeometry(QtCore.QRect(0, 0, 401, 80))
  83. self.horizontalLayoutWidget.setObjectName("horizontalLayoutWidget")
  84. self.horizontalLayout = QtWidgets.QHBoxLayout(self.horizontalLayoutWidget)
  85. self.horizontalLayout.setContentsMargins(0, 0, 0, 0)
  86. self.horizontalLayout.setObjectName("horizontalLayout")
  87. self.pushButton_5 = QtWidgets.QPushButton(self.horizontalLayoutWidget)
  88. self.pushButton_5.setMinimumSize(QtCore.QSize(0, 48))
  89. self.pushButton_5.setObjectName("pushButton_5")
  90. self.horizontalLayout.addWidget(self.pushButton_5)
  91. self.pushButton_4 = QtWidgets.QPushButton(self.horizontalLayoutWidget)
  92. self.pushButton_4.setMinimumSize(QtCore.QSize(0, 48))
  93. self.pushButton_4.setObjectName("pushButton_4")
  94. self.horizontalLayout.addWidget(self.pushButton_4)
  95. self.pushButton_3 = QtWidgets.QPushButton(self.horizontalLayoutWidget)
  96. self.pushButton_3.setMinimumSize(QtCore.QSize(0, 48))
  97. self.pushButton_3.setObjectName("pushButton_3")
  98. self.horizontalLayout.addWidget(self.pushButton_3)
  99. self.pushButton_2 = QtWidgets.QPushButton(self.horizontalLayoutWidget)
  100. self.pushButton_2.setMinimumSize(QtCore.QSize(0, 48))
  101. self.pushButton_2.setObjectName("pushButton_2")
  102. self.horizontalLayout.addWidget(self.pushButton_2)
  103. self.pushButton = QtWidgets.QPushButton(self.horizontalLayoutWidget)
  104. self.pushButton.setMinimumSize(QtCore.QSize(0, 48))
  105. self.pushButton.setObjectName("pushButton")
  106. self.horizontalLayout.addWidget(self.pushButton)
  107. MainWindow.setCentralWidget(self.centralwidget)
  108. self.retranslateUi(MainWindow)
  109. QtCore.QMetaObject.connectSlotsByName(MainWindow)
  110. def retranslateUi(self, MainWindow):
  111. _translate = QtCore.QCoreApplication.translate
  112. MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
  113. self.pushButton_5.setText(_translate("MainWindow", "PushButton"))
  114. self.pushButton_4.setText(_translate("MainWindow", "PushButton"))
  115. self.pushButton_3.setText(_translate("MainWindow", "PushButton"))
  116. self.pushButton_2.setText(_translate("MainWindow", "PushButton"))
  117. self.pushButton.setText(_translate("MainWindow", "PushButton"))
  118. if __name__ == '__main__':
  119. app = QApplication(sys.argv)
  120. # 设置样式绑定:通过ObjectName 名称进行绑定
  121. app.setStyleSheet(StyleSheet)
  122. MainWindow = QMainWindow()
  123. ui = Ui_MainWindow()
  124. ui.setupUi(MainWindow)
  125. MainWindow.show()
  126. sys.exit(app.exec_())

 本文参考自github:GitHub - PyQt5/PyQt: PyQt Examples(PyQt各种测试和例子) PyQt4 PyQt5

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/Gausst松鼠会/article/detail/652842
推荐阅读
相关标签