Last Updated on 2021-03-11 by Clay
Introduction
Recently, I always develop mobile App by Flutter. In the process of my development, I found that gradient rendering components can make the interface look better.
So I start to think, how do I do it in desktop application development by PyQt5?
After I researching, I found a easy method to do it. And I recorded it in below.
Qlineargradient
If you don't talk about more complicated rendering way, just use setStyleSheet to set qlineargradient parameter.
For example there is a button:
we can set its StyleSheet to the following:
x1, y1, x2, and y2 is a simple position settings about the rendering position.I just use two colors to render.
Output:
Sample code
The following is the code for my simple test to change the component's color. Maybe you can refer to it.
The first file is the interface gradient.py.
# -*- coding: utf-8 -*-
# Form implementation generated from reading ui file 'gradient.ui'
#
# Created by: PyQt5 UI code generator 5.13.0
#
# WARNING! All changes made in this file will be lost!
from PyQt5 import QtCore, QtGui, QtWidgets
class Ui_MainWindow(object):
def setupUi(self, MainWindow):
MainWindow.setObjectName("MainWindow")
MainWindow.resize(834, 299)
self.centralwidget = QtWidgets.QWidget(MainWindow)
self.centralwidget.setObjectName("centralwidget")
self.pushButton = QtWidgets.QPushButton(self.centralwidget)
self.pushButton.setGeometry(QtCore.QRect(230, 30, 331, 111))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.pushButton.setFont(font)
self.pushButton.setStyleSheet("")
self.pushButton.setObjectName("pushButton")
self.horizontalSlider = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider.setGeometry(QtCore.QRect(100, 200, 160, 22))
self.horizontalSlider.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider.setObjectName("horizontalSlider")
self.lineEdit = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit.setGeometry(QtCore.QRect(300, 200, 51, 22))
self.lineEdit.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit.setObjectName("lineEdit")
self.label = QtWidgets.QLabel(self.centralwidget)
self.label.setGeometry(QtCore.QRect(280, 200, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label.setFont(font)
self.label.setObjectName("label")
self.color_1 = QtWidgets.QLabel(self.centralwidget)
self.color_1.setGeometry(QtCore.QRect(10, 200, 80, 80))
self.color_1.setText("")
self.color_1.setObjectName("color_1")
self.horizontalSlider_2 = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider_2.setGeometry(QtCore.QRect(100, 230, 160, 22))
self.horizontalSlider_2.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider_2.setObjectName("horizontalSlider_2")
self.label_3 = QtWidgets.QLabel(self.centralwidget)
self.label_3.setGeometry(QtCore.QRect(280, 230, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label_3.setFont(font)
self.label_3.setObjectName("label_3")
self.lineEdit_2 = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_2.setGeometry(QtCore.QRect(300, 230, 51, 22))
self.lineEdit_2.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit_2.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit_2.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit_2.setObjectName("lineEdit_2")
self.horizontalSlider_3 = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider_3.setGeometry(QtCore.QRect(100, 260, 160, 22))
self.horizontalSlider_3.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider_3.setObjectName("horizontalSlider_3")
self.label_4 = QtWidgets.QLabel(self.centralwidget)
self.label_4.setGeometry(QtCore.QRect(280, 260, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label_4.setFont(font)
self.label_4.setObjectName("label_4")
self.lineEdit_3 = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_3.setGeometry(QtCore.QRect(300, 260, 51, 22))
self.lineEdit_3.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit_3.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit_3.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit_3.setObjectName("lineEdit_3")
self.label_5 = QtWidgets.QLabel(self.centralwidget)
self.label_5.setGeometry(QtCore.QRect(740, 230, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label_5.setFont(font)
self.label_5.setObjectName("label_5")
self.color_2 = QtWidgets.QLabel(self.centralwidget)
self.color_2.setGeometry(QtCore.QRect(470, 200, 80, 80))
self.color_2.setText("")
self.color_2.setObjectName("color_2")
self.horizontalSlider_5 = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider_5.setGeometry(QtCore.QRect(560, 230, 160, 22))
self.horizontalSlider_5.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider_5.setObjectName("horizontalSlider_5")
self.horizontalSlider_6 = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider_6.setGeometry(QtCore.QRect(560, 260, 160, 22))
self.horizontalSlider_6.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider_6.setObjectName("horizontalSlider_6")
self.lineEdit_4 = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_4.setGeometry(QtCore.QRect(760, 260, 51, 22))
self.lineEdit_4.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit_4.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit_4.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit_4.setObjectName("lineEdit_4")
self.horizontalSlider_4 = QtWidgets.QSlider(self.centralwidget)
self.horizontalSlider_4.setGeometry(QtCore.QRect(560, 200, 160, 22))
self.horizontalSlider_4.setOrientation(QtCore.Qt.Horizontal)
self.horizontalSlider_4.setObjectName("horizontalSlider_4")
self.lineEdit_5 = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_5.setGeometry(QtCore.QRect(760, 230, 51, 22))
self.lineEdit_5.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit_5.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit_5.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit_5.setObjectName("lineEdit_5")
self.label_7 = QtWidgets.QLabel(self.centralwidget)
self.label_7.setGeometry(QtCore.QRect(740, 200, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label_7.setFont(font)
self.label_7.setObjectName("label_7")
self.label_8 = QtWidgets.QLabel(self.centralwidget)
self.label_8.setGeometry(QtCore.QRect(740, 260, 16, 22))
font = QtGui.QFont()
font.setFamily("Arial")
font.setPointSize(12)
font.setBold(True)
font.setWeight(75)
self.label_8.setFont(font)
self.label_8.setObjectName("label_8")
self.lineEdit_6 = QtWidgets.QLineEdit(self.centralwidget)
self.lineEdit_6.setGeometry(QtCore.QRect(760, 200, 51, 22))
self.lineEdit_6.setLayoutDirection(QtCore.Qt.LeftToRight)
self.lineEdit_6.setLocale(QtCore.QLocale(QtCore.QLocale.Chinese, QtCore.QLocale.Taiwan))
self.lineEdit_6.setAlignment(QtCore.Qt.AlignRight|QtCore.Qt.AlignTrailing|QtCore.Qt.AlignVCenter)
self.lineEdit_6.setObjectName("lineEdit_6")
self.line = QtWidgets.QFrame(self.centralwidget)
self.line.setGeometry(QtCore.QRect(400, 200, 20, 81))
self.line.setFrameShape(QtWidgets.QFrame.VLine)
self.line.setFrameShadow(QtWidgets.QFrame.Sunken)
self.line.setObjectName("line")
MainWindow.setCentralWidget(self.centralwidget)
self.retranslateUi(MainWindow)
QtCore.QMetaObject.connectSlotsByName(MainWindow)
def retranslateUi(self, MainWindow):
_translate = QtCore.QCoreApplication.translate
MainWindow.setWindowTitle(_translate("MainWindow", "MainWindow"))
self.pushButton.setText(_translate("MainWindow", "TEST BUTTON"))
self.lineEdit.setText(_translate("MainWindow", "0"))
self.label.setText(_translate("MainWindow", "R"))
self.label_3.setText(_translate("MainWindow", "G"))
self.lineEdit_2.setText(_translate("MainWindow", "0"))
self.label_4.setText(_translate("MainWindow", "B"))
self.lineEdit_3.setText(_translate("MainWindow", "0"))
self.label_5.setText(_translate("MainWindow", "G"))
self.lineEdit_4.setText(_translate("MainWindow", "0"))
self.lineEdit_5.setText(_translate("MainWindow", "0"))
self.label_7.setText(_translate("MainWindow", "R"))
self.label_8.setText(_translate("MainWindow", "B"))
self.lineEdit_6.setText(_translate("MainWindow", "0"))
This is converted from the interface drawn by Qt Designer via PyUIC.
The following code is about program function.
# -*- coding: utf-8 -*-
import sys
from PyQt5.QtWidgets import *
from gradient import Ui_MainWindow
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.ui = Ui_MainWindow()
self.ui.setupUi(self)
# Display color
self.ui.color_1.setStyleSheet('background-color: rgb(0, 0, 0);')
self.ui.color_2.setStyleSheet('background-color: rgb(0, 0, 0);')
# HorizontalSlider
self.ui.horizontalSlider.setMaximum(255)
self.ui.horizontalSlider_2.setMaximum(255)
self.ui.horizontalSlider_3.setMaximum(255)
self.ui.horizontalSlider_4.setMaximum(255)
self.ui.horizontalSlider_5.setMaximum(255)
self.ui.horizontalSlider_6.setMaximum(255)
self.ui.horizontalSlider.valueChanged.connect(lambda: self.color_value('R1'))
self.ui.horizontalSlider_2.valueChanged.connect(lambda: self.color_value('G1'))
self.ui.horizontalSlider_3.valueChanged.connect(lambda: self.color_value('B1'))
self.ui.horizontalSlider_4.valueChanged.connect(lambda: self.color_value('R2'))
self.ui.horizontalSlider_5.valueChanged.connect(lambda: self.color_value('G2'))
self.ui.horizontalSlider_6.valueChanged.connect(lambda: self.color_value('B2'))
def color_value(self, color):
if color == 'R1':
self.ui.lineEdit.setText(str(self.ui.horizontalSlider.value()))
elif color == 'G1':
self.ui.lineEdit_2.setText(str(self.ui.horizontalSlider_2.value()))
elif color == 'B1':
self.ui.lineEdit_3.setText(str(self.ui.horizontalSlider_3.value()))
elif color == 'R2':
self.ui.lineEdit_4.setText(str(self.ui.horizontalSlider_4.value()))
elif color == 'G2':
self.ui.lineEdit_5.setText(str(self.ui.horizontalSlider_5.value()))
elif color == 'B2':
self.ui.lineEdit_6.setText(str(self.ui.horizontalSlider_6.value()))
self.color_change()
def color_change(self):
self.newR1 = int(self.ui.lineEdit.text())
self.newG1 = int(self.ui.lineEdit_2.text())
self.newB1 = int(self.ui.lineEdit_3.text())
self.ui.color_1.setStyleSheet('background-color: rgb({}, {}, {});'.format(
self.newR1,
self.newG1,
self.newB1
))
self.newR2 = int(self.ui.lineEdit_4.text())
self.newG2 = int(self.ui.lineEdit_5.text())
self.newB2 = int(self.ui.lineEdit_6.text())
self.ui.color_2.setStyleSheet('background-color: rgb({}, {}, {});'.format(
self.newR2,
self.newG2,
self.newB2
))
self.gradient_color_button()
def gradient_color_button(self):
self.ui.pushButton.setStyleSheet('background-color: '
'qlineargradient('
'spread:'
'pad, x1:0, y1:0.5, x2:1, y2:0.5,'
'stop:0 rgb({}, {}, {}),'
'stop:1 rgb({}, {}, {}));'.format(self.newR1,
self.newG1,
self.newB1,
self.newR2,
self.newG2,
self.newB2))
if __name__ == '__main__':
app = QApplication([])
window = MainWindow()
window.show()
sys.exit(app.exec_())
Output:
You can choose any color you want and try it to see how it works.
More related tutorial can be seen on the website https://www.learnpyqt.com/widgets/gradient/. I recently discovered that this website teaches many interesting interface applications, such as the function of visualizing music. They are all fun and I recommend them.