1 # -*- coding:utf-8 -*- 2 ''' 3 Created on Sep 20, 2018 4 5 @author: SaShuangYiBing 6 7 Comment: 8 '' 9 import sys 10 from PyQt5.QtGui import QColor 11 from PyQt5.QtWidgets import QApplication,QWidget,QPushButton,QFrame 12 13 class New_test(QWidget): 14 def __init__(self): 15 super().__init__() 16 self.initUI() 17 18 def initUI(self): 19 self.color = QColor(0,0,0) 20 self.redbtn = QPushButton('Red',self) 21 self.redbtn.setCheckable(True) 22 self.redbtn.move(10,10) 23 self.redbtn.clicked[bool].connect(self.setColor) 24 25 self.greenbtn = QPushButton('Green',self) 26 self.greenbtn.setCheckable(True) 27 self.greenbtn.move(10,60) 28 self.greenbtn.clicked[bool].connect(self.setColor) 29 30 self.bluebtn = QPushButton('Blue',self) 31 self.bluebtn.setCheckable(True) 32 self.bluebtn.move(10,110) 33 self.bluebtn.clicked[bool].connect(self.setColor) 34 35 self.square = QFrame(self) 36 self.square.setGeometry(150,20,100,100) 37 self.square.setStyleSheet("QWidget {background-color: %s}" %self.color.name()) 38 39 self.setGeometry(300,300,280,170) 40 self.setWindowTitle('Toggle button') 41 self.show() 42 43 def setColor(self,pressed): 44 source = self.sender() 45 if source.text() == 'Red': 46 self.color.setGreen(0) 47 self.color.setRed(255) 48 self.color.setBlue(0) 49 50 elif source.text() == 'Green': 51 self.color.setRed(0) 52 self.color.setGreen(255) 53 self.color.setBlue(0) 54 55 else: 56 self.color.setRed(0) 57 self.color.setGreen(0) 58 self.color.setBlue(255) 59 self.square.setStyleSheet("QFrame {background-color: %s}" %self.color.name()) 60 61 if __name__ == '__main__': 62 app = QApplication(sys.argv) 63 ex = New_test() 64 sys.exit(app.exec_()) 65
启动后:
点击红色按钮
点击绿色按钮
点击蓝色按钮
知识点说明:
1 Qt中设置按钮或QWidget的外观是,可以使用QT Style Sheets来进行设置,非常方便。 2 可以用setStyleSheet("font: bold; font-size:20px; color: rgb(241, 70, 62); background-color: green");来进行设置,其他的样式介绍如下: 3 font: bold; 是否粗体显示 4 border-image:""; 用来设定边框的背景图片。 5 border-radius:5px; 用来设定边框的弧度。可以设定圆角的按钮 6 border-width: 1px; 边框大小 7 8 9 font-family:""; 来设定字体所属家族, 10 font-size:20px; 来设定字体大小 11 font-style:""; 来设定字体样式 12 font-weight:20px; 来设定字体深浅 13 background-color: green; 设置背景颜色 14 background:transparent; 设置背景为透明 15 color:rgb(241, 70, 62); 设置前景颜色 16 selection-color:rgb(241, 70, 62); 用来设定选中时候的颜色 17 18 19 可以使用border-top,border-right,border-bottom,border-left分别设定按钮的上下左右边框, 20 同样有border-left-color, border-left-style, border-left-width.等分别来设定他们的颜色,样式和宽度