How do I create custom material style elements?
I love material design. I like jquery, web forms and elements. It has many styles. But when I use PyQt I have a default button and a checkbox ...
I like something like this:
Can I change qt elements to look like web form elements? Tell me what to read or have examples of how to do this? I just don't know if this is possible because I don't know which direction to look in ...
I am using qt4 and windows ... and only know python, not C / C ++
+3
source to share
2 answers
Start creating your own widgets and override paintEvent
I am putting an example here that basically summarizes what you need to know.
In this example, the checkbox is checked as an on / off button.
from PyQt4 import QtGui, QtCore
import sys
#===============================================================================
# MyCheckBox
#===============================================================================
#className
class MyCheckBox(QtGui.QCheckBox):
#|-----------------------------------------------------------------------------|
# class Variables
#|-----------------------------------------------------------------------------|
#no classVariables
#|-----------------------------------------------------------------------------|
# Constructor
#|-----------------------------------------------------------------------------|
def __init__(self, *args, **kwargs):
QtGui.QCheckBox.__init__(self, *args, **kwargs)
self.setStyleSheet("background-color: rgb(0, 0, 0);\n" +
"color: rgb(255, 255, 255);\n")
#set default check as True
self.setChecked(True)
#set default enable as True
# if it set to false will always remain on/off
# here it is on as setChecked is True
self.setEnabled(True)
self._enable = True
#|--------------------------End of Constructor---------------------------------|
#|-----------------------------------------------------------------------------|
# mousePressEvent
#|-----------------------------------------------------------------------------|
#overrite
def mousePressEvent(self, *args, **kwargs):
#tick on and off set here
if self.isChecked():
self.setChecked(False)
else:
self.setChecked(True)
return QtGui.QCheckBox.mousePressEvent(self, *args, **kwargs)
#|--------------------------End of mousePressEvent-----------------------------|
#|-----------------------------------------------------------------------------|
# paintEvent
#|-----------------------------------------------------------------------------|
def paintEvent(self,event):
#just setting some size aspects
self.setMinimumHeight(40)
self.setMinimumWidth(100)
self.setMaximumHeight(50)
self.setMaximumWidth(150)
self.resize(self.parent().width(),self.parent().height())
painter = QtGui.QPainter()
painter.begin(self)
#for the black background
brush = QtGui.QBrush(QtGui.QColor(0,0,0),style=QtCore.Qt.SolidPattern)
painter.fillRect(self.rect(),brush)
#smooth curves
painter.setRenderHint(QtGui.QPainter.Antialiasing)
#for the on off font
font = QtGui.QFont()
font.setFamily("Courier New")
font.setPixelSize(28)
painter.setFont(font)
#change the look for on/off
if self.isChecked():
#blue fill
brush = QtGui.QBrush(QtGui.QColor(50,50,255),style=QtCore.Qt.SolidPattern)
painter.setBrush(brush)
#rounded rectangle as a whole
painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
self.height()/2,self.height()/2)
#white circle/button instead of the tick mark
brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
painter.setBrush(brush)
painter.drawEllipse(self.width()-self.height(),0,self.height(),self.height())
#on text
painter.drawText(self.width()/4,self.height()/1.5, "On")
else:
#gray fill
brush = QtGui.QBrush(QtGui.QColor(50,50,50),style=QtCore.Qt.SolidPattern)
painter.setBrush(brush)
#rounded rectangle as a whole
painter.drawRoundedRect(0,0,self.width()-2,self.height()-2, \
self.height()/2,self.height()/2)
#white circle/button instead of the tick but in different location
brush = QtGui.QBrush(QtGui.QColor(255,255,255),style=QtCore.Qt.SolidPattern)
painter.setBrush(brush)
painter.drawEllipse(0,0,self.height(),self.height())
#off text
painter.drawText(self.width()/2,self.height()/1.5, "Off")
#|-----------------------End of paintEvent-------------------------------------|
if __name__ == '__main__':
app = QtGui.QApplication(sys.argv)
wgt = QtGui.QWidget()
wgt.setStyleSheet("background-color: rgb(0, 0, 0);\n")
cb = MyCheckBox()
cb.setParent(wgt)
layout = QtGui.QHBoxLayout()
layout.addWidget(cb)
wgt.resize(200,100)
wgt.show()
sys.exit(app.exec_())
EDIT:
Attaching screenshots for what it looks like.
+4
source to share