Skip to content

[PyQt5] 將元件漸層渲染不同顏色、漸層顏色

Last Updated on 2021-05-17 by Clay

最近在研究如何使用 Flutter 開發手機 App。在研究的過程中，我發現將『元件漸層渲染』可以做出很漂亮的界面（相關的心得筆記可以參考《Flutter 中將元件渲染成不同顏色》這篇）。

於是我就開始思考：以 Python 開發桌面應用程式的 PyQt5 能不能做到這件事呢？

一查之下，果不其然，是可以的，而且也是渲染地相當漂亮。那麼，以下我就簡單筆記我如何完成一個元件的漸層渲染。

Qlineargradient

其實若不談實現非常深奧的渲染方式，好比說漩渦式的中心渲染——我還真的看過這種渲染方式，而且相當漂亮——簡單地設定點到點的渲染在將元件設定 setStyleSheet 時設定 qlineargradient 即可。

比如說這是一個按鈕：

我在 StyleSheet 進行這樣的設定：

x1, y1, x2, y2 的設定其實非常簡單，指得就是從元件的『右上角』為原點，往下伸展最長的位置為 1 、往右伸展最常的位置亦為 1。

所以這裡我設定的是兩個顏色渲染的位置，從元件的左邊中心渲染到右邊中心。

下面的 rgb 設定就是我渲染的兩個顏色。

Output:

是不是非常單純呢？

範例程式碼

以下是我簡單測試改變顏色的程式碼，也許大家可以直接參考，分成兩個檔案，首先是界面 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"))



這個是從 Qt Designer 拉好的界面通過 PyUIC 直接轉換而成的。

然後是程式功能：

# -*- 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:

大家可以任意選取自己想要的顏色，試試看效果如何吧。

更多相關的教學可以在 https://www.learnpyqt.com/widgets/gradient/ 這個網站中看到，我最近發現了這個網站教導了許多有趣的界面應用，比方說將音樂視覺化的功能，都非常好玩，誠心推薦。

Tags:

Leave a Reply取消回覆

Exit mobile version