qt - 如何创建类似 Material Design 的自定义元素？

Question

我喜欢 Material 设计。我喜欢 jquery、web 表单和元素。它有很多款式。但是当我使用 PyQt 时，我有默认按钮和复选框......

我喜欢这样的事情:


我可以更改 qt 元素，使它们与 Web 表单的元素相似吗？
告诉我要阅读什么或可能已经有如何执行此操作的示例？我只是不知道这是否可能，因为我不知道该往哪个方向寻找......

我使用 qt4 和 windows ... 并且只知道 python，不知道 C/C++

Answer 1

开始创建您自己的小部件并覆盖paintEvent

我在这里放了一个例子，主要总结了你需要知道的东西。
该示例将复选框显示为开/关按钮。

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_())

编辑:

附上屏幕截图以了解它的外观