Python入坑系列-pyside6桌面编程之QColor添加色彩彰显个性
zhezhongyun 2024-12-07 18:36 30 浏览
通过本文章,你可以掌握以下内容:
- Pyside6 Color颜色模型
- Pyside6 Color色系介绍
- Pyside6更换系统主题
1、Pyside6 Color颜色模型
颜色通常以RGB(红色、绿色和蓝色)分量的形式指定,但也可以以HSV(色调、饱和度和亮度)和CMYK(青色、品红、黄色和黑色)分量的形式指定。此外,还可以使用颜色名称来指定颜色。颜色名称可以是SVG 1.0颜色名称中的任何一个
QColor构造函数基于RGB值创建颜色。要基于HSV或CMYK值创建QColor,分别使用toHsv()和toCmyk()函数。这些函数返回使用所需格式的颜色副本。此外,静态函数fromRgb()、fromHsv()和fromCmyk()可以从指定的值创建颜色。或者,可以使用convertTo()函数将颜色转换为任一三种格式(返回所需格式的颜色副本),或使用setRgb()、setHsv()和setCmyk()函数改变此颜色的格式。spec()函数指明颜色是如何被指定的。
可以通过向fromString()函数传递一个RGB字符串(如“#112233”)、一个ARGB字符串(如“#ff112233”)或一个颜色名称(如“blue”)来设置颜色。颜色名称取自SVG 1.0颜色名称。name()函数以“#000000”的格式返回颜色的名称。也可以使用setRgb()、setHsv()和setCmyk()设置颜色。要获取更亮或更暗的颜色,分别使用lighter()和darker()函数。
isValid()函数指示QColor是否完全合法。例如,RGB值超出范围的RGB颜色是非法的。出于性能原因,QColor大多忽略非法颜色,因此,使用无效颜色的结果是未定义的。颜色组件可以单独检索,例如使用red()、hue()和cyan()。
颜色组件的值也可以一次性使用getRgb()、getHsv()和getCmyk()函数检索。使用RGB颜色模型,颜色组件还可以通过rgb()访问。
有几个相关的非成员函数:QRgb是代表RGB值三元组(r, g, b)的unsigned int的类型定义。注意,它也可以保存alpha通道的值(更多信息,请参见Alpha-Blended Drawing部分)。qRed()、qBlue()和qGreen()函数返回给定QRgb值的相应组件,而qRgb()和qRgba()函数基于给定的组件值创建并返回QRgb三元组。最后,qAlpha()函数返回提供的QRgb的alpha组件,qGray()函数基于给定值计算并返回一个灰度值。QColor是平台和设备独立的。QColormap类将颜色映射到硬件上。
预定义颜色
命名空间中有 20 个预定义QColor对象QColorConstants,包括黑色、白色、主要和次要颜色、这些颜色的较暗版本,以及三种灰度。此外,QColorConstants.Svg命名空间为标准SVG颜色关键字名称定义了QColor对象。
QColorConstants.Color0、QColorConstants.Color1和QColorConstants.Transparent颜色用于特殊目的。QColorConstants.Color0(零像素值)和QColorConstants.Color1(非零像素值)是在QBitmaps中绘图的特殊颜色。使用QColorConstants.Color0绘制将位图位设置为0(透明;即背景),而使用QColorConstants.Color1绘制将位设置为1(不透明;即前景)。QColorConstants.Transparent用于指示透明像素。使用此值绘制时,将使用适合正在使用的底层像素格式的像素值。
HSV 颜色模型
RGB 模型是面向硬件的。它的表现接近大多数显示器的显示。相比之下,HSV 以更适合人类对颜色感知的方式表示颜色。例如,“强于”、“暗于”和“相反”的关系在 HSV 中很容易表达,但在 RGB 中很难表达。
HSV 与 RGB 一样,具有三个组成部分
- H(色调),如果颜色是彩色(不是灰色),则在 0 到 359 范围内;如果颜色是灰色,则毫无意义。它代表大多数人熟悉的色轮上的度数。红色为 0(度),绿色为 120,蓝色为 240。
- S代表饱和度,范围是0到255,它越大,颜色越强。浅灰色的饱和度接近 0;非常强烈的颜色饱和度接近 255。
- V 代表颜色,范围为 0 到 255,代表颜色的明度或亮度。 0 为黑色; 255 尽可能远离黑色。
2、Pyside6 Color色系介绍
色彩是视觉设计的重要组成部分,它不仅能影响美观性,还能影响情绪和行为。由于桌面程序默认组件的色彩比较单一,需要开发通过了解色彩系统给组件配色,给用户带来视觉冲击。
下面是自定义颜色标签,部分示例会使用到该类
import re
from PySide6.QtCore import Qt
from PySide6.QtGui import QPalette, QColor
from PySide6.QtWidgets import QLabel
class ColorLable(QLabel):
def __init__(self, text, color=None, fontcolor="white", align=Qt.AlignCenter):
"""接收color参数为:按颜色名称(如 "red")、十六进制颜色代码(如 "#000000")以及RGB值(如 rgb(83, 168, 255))"""
super(ColorLable, self).__init__()
self.setAlignment(align)
self.setStyleSheet(f"color:{fontcolor}")
self.setAutoFillBackground(True)
if color is None:
color = text
rgb_match = re.match(r'rgb\((\d+),\s*(\d+),\s*(\d+)\)', color)
if rgb_match:
r, g, b = map(int, rgb_match.groups())
qcolor = QColor(r, g, b)
else:
qcolor = QColor(color)
r, g, b, _ = qcolor.getRgb()
hex_str_upper = qcolor.name().upper()
if color is text:
self.setText(f"{color}<br>rgb({r}, {g}, {b})<br>{hex_str_upper}")
elif text == "":
self.setText(f"rgb({r}, {g}, {b})<br>{hex_str_upper}")
else:
self.setText(f"{color}<br>rgb({r}, {g}, {b})<br>{hex_str_upper}")
palette = self.palette()
palette.setColor(QPalette.Window, qcolor)
self.setPalette(palette)
原色
原色是不能通过混合其他颜色来创建的颜色。在传统的色彩理论中,原色包括红色、黄色和蓝色。在光的颜色混合(如屏幕显示)中,原色被认为是红色、绿色和蓝色(RGB)
示例代码如下:
import re
from PySide6.QtCore import Qt
from PySide6.QtGui import QPalette, QColor
from PySide6.QtWidgets import QLabel
class ColorLable(QLabel):
def __init__(self, text, color=None, fontcolor="white", align=Qt.AlignCenter):
"""接收color参数为:按颜色名称(如 "red")、十六进制颜色代码(如 "#000000")以及RGB值(如 rgb(83, 168, 255))"""
super(ColorLable, self).__init__()
self.setAlignment(align)
self.setStyleSheet(f"color:{fontcolor}")
self.setAutoFillBackground(True)
if color is None:
color = text
rgb_match = re.match(r'rgb\((\d+),\s*(\d+),\s*(\d+)\)', color)
if rgb_match:
r, g, b = map(int, rgb_match.groups())
qcolor = QColor(r, g, b)
else:
qcolor = QColor(color)
r, g, b, _ = qcolor.getRgb()
hex_str_upper = qcolor.name().upper()
if color is text:
self.setText(f"{color}<br>rgb({r}, {g}, {b})<br>{hex_str_upper}")
elif text == "":
self.setText(f"rgb({r}, {g}, {b})<br>{hex_str_upper}")
else:
self.setText(f"{text}<br>rgb({r}, {g}, {b})<br>{hex_str_upper}")
palette = self.palette()
palette.setColor(QPalette.Window, qcolor)
self.setPalette(palette)
主色
在视觉设计中指的是在一幅画面、设计作品或空间中占据主导地位的颜色。这种颜色通常是最引人注目的,能够影响整体的视觉效果和情感氛围。选择合适的主色调对于确保设计的协调性和传达正确的信息至关重要。
示例代码如下:
import sys
from PySide6.QtWidgets import *
from color.colorlable import ColorLable
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setWindowTitle("QColor之主色-蓝色系")
self.setMinimumSize(700, 500)
vboxlayout = QVBoxLayout()
hboxlayout = QHBoxLayout();
vboxlayout.addWidget(ColorLable("Brand Color", "#409EFF","black"))
hboxlayout.addWidget(ColorLable("","rgb(83, 168, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(102, 177, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(121, 187, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(140, 197, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(160, 207, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(179, 216, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(198, 226, 255)","black"))
hboxlayout.addWidget(ColorLable("", "rgb(217, 236, 255)","black"))
vboxlayout.addLayout(hboxlayout)
widget = QWidget()
widget.setLayout(vboxlayout)
self.setCentralWidget(widget)
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()
暖色
温暖色系主要包括红色、橙色、黄色及其衍生色调,这些颜色通常会让人联想到阳光、火焰和暖光等,能够给人带来温暖、舒适和活力的感觉。在视觉设计、艺术和室内装饰中,温暖色系经常被用来创造亲切、欢快的氛围
示例代码如下:
import sys
from PySide6.QtWidgets import *
from color.colorlable import ColorLable
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setWindowTitle("QColor之暖色系")
self.setMinimumSize(700, 500)
layout = QHBoxLayout()
layout.addWidget(ColorLable("red"))
layout.addWidget(ColorLable("orange"))
layout.addWidget(ColorLable("yellow"))
widget = QWidget()
widget.setLayout(layout)
self.setCentralWidget(widget)
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()
辅助色
是色轮上互为对立的颜色,它们在视觉上形成鲜明的对比,能够相互强化对方的鲜艳度和视觉冲击力。当这些颜色组合在一起时,可以创造出极具吸引力和动态的视觉效果,除了主色外的场景色,需要在不同的场景中使用(例如危险色表示危险的操作)
示例代码如下:
import sys
from PySide6.QtWidgets import *
from color.colorlable import ColorLable
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setWindowTitle("QColor之辅助色")
self.setMinimumSize(700, 500)
mainlayout = QHBoxLayout()
vboxsuccess = QVBoxLayout()
hboxsuccess = QHBoxLayout()
vboxsuccess.addWidget(ColorLable("Success", "#67C23A","black"))
hboxsuccess.addWidget(ColorLable("","rgb(225, 243, 216)","black"))
hboxsuccess.addWidget(ColorLable("", "rgb(240, 249, 235)","black"))
vboxsuccess.addLayout(hboxsuccess)
mainlayout.addLayout(vboxsuccess)
vboxwarn = QVBoxLayout()
hboxwarn = QHBoxLayout()
vboxwarn.addWidget(ColorLable("Warning", "#E6A23C", "black"))
hboxwarn.addWidget(ColorLable("", "rgb(250, 236, 216)", "black"))
hboxwarn.addWidget(ColorLable("", "rgb(253, 246, 236)", "black"))
vboxwarn.addLayout(hboxwarn)
mainlayout.addLayout(vboxwarn)
vboxdanger = QVBoxLayout()
hboxdanger = QHBoxLayout()
vboxdanger.addWidget(ColorLable("Danger", "#F56C6C", "black"))
hboxdanger.addWidget(ColorLable("", "rgb(253, 226, 226)", "black"))
hboxdanger.addWidget(ColorLable("", "rgb(254, 240, 240)", "black"))
vboxdanger.addLayout(hboxdanger)
mainlayout.addLayout(vboxdanger)
vboxinfo = QVBoxLayout()
hboxinfo = QHBoxLayout()
vboxinfo.addWidget(ColorLable("Info", "#909399", "black"))
hboxinfo.addWidget(ColorLable("", "rgb(233, 233, 235)", "black"))
hboxinfo.addWidget(ColorLable("", "rgb(244, 244, 245)", "black"))
vboxinfo.addLayout(hboxinfo)
mainlayout.addLayout(vboxinfo)
widget = QWidget()
widget.setLayout(mainlayout)
self.setCentralWidget(widget)
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()
中性色
中性色指的是不包含或几乎不包含色相的颜色,它们在色彩搭配中起到平衡和稳定的作用。中性色包括黑色、白色、灰色,以及不同深浅的棕色和米色。这些颜色因其灵活性和适应性,在设计和艺术领域中被广泛应用。常用于文本、背景和边框颜色,通过运用不同的中性色,来表现层次结构。
示例代码如下:
import sys
from PySide6.QtWidgets import *
from color.colorlable import ColorLable
class MainWindow(QMainWindow):
def __init__(self):
super(MainWindow, self).__init__()
self.setWindowTitle("QColor之辅助色")
self.setMinimumSize(700, 500)
mainlayout = QHBoxLayout()
layout1 = QVBoxLayout()
layout1.addWidget(ColorLable("主要文字", "#303133"))
layout1.addWidget(ColorLable("常规文字", "#606266"))
layout1.addWidget(ColorLable("次要文字", "#909399"))
layout1.addWidget(ColorLable("占位文字", "#C0C4CC"))
mainlayout.addLayout(layout1)
layout2 = QVBoxLayout()
layout2.addWidget(ColorLable("一级边框", "#DCDFE6", "black"))
layout2.addWidget(ColorLable("二级边框", "#E4E7ED", "black"))
layout2.addWidget(ColorLable("三级边框", "#EBEEF5", "black"))
layout2.addWidget(ColorLable("四级边框", "#F2F6FC", "black"))
mainlayout.addLayout(layout2)
layout3 = QVBoxLayout()
layout3.addWidget(ColorLable("基础黑色", "#000000"))
layout3.addWidget(ColorLable("基础白色", "#FFFFFF", "black"))
layout3.addWidget(ColorLable("透明", "Transparent", "black"))
mainlayout.addLayout(layout3)
widget = QWidget()
widget.setLayout(mainlayout)
self.setCentralWidget(widget)
if __name__ == '__main__':
app = QApplication(sys.argv)
window = MainWindow()
window.show()
app.exec()
颜色选择器
Pyside6可以通过QColorDialog.getColor(),直接打开颜色选择器
import sys
from PySide6.QtWidgets import QApplication, QColorDialog
if __name__ == '__main__':
app = QApplication(sys.argv)
color = QColorDialog.getColor()
sys.exit(app.exec())
SVG颜色码表
3、更换系统主题
在PySide6与html页面实现主题切换类似,通过更换全局样式表实现,具体步骤如下:
1.定义样式表:为每个主题创建一个样式表文件,或者在一个大的样式表文件中为不同的主题定义不同的部分。
2. 加载样式表:在应用程序启动时,根据用户的主题选择加载相应的样式表。这可以通过读取一个配置文件、数据库或者其他持久化存储的方式来确定用户上次选择的主题。
3. 应用样式表:使用QApplication的setStyleSheet方法应用加载的样式表。这将影响应用程序中所有控件的外观。
4. 切换主题:提供一个界面元素(如菜单项、按钮等)供用户选择主题。当用户选择一个新主题时,重新加载对应的样式表并应用它。
5. 保存用户选择:将用户的主题选择保存到配置文件、数据库或其他持久化存储中,以便下次启动应用程序时能够恢复用户的选择。
示例代码如下:
import sys
from PySide6.QtWidgets import QApplication, QMainWindow, QPushButton, QVBoxLayout, QWidget
class MainWindow(QMainWindow):
def __init__(self):
super().__init__()
self.setWindowTitle("QColor之主题切换")
self.setGeometry(100, 100, 400, 300)
# 创建中心窗口和布局
centralWidget = QWidget()
self.setCentralWidget(centralWidget)
layout = QVBoxLayout(centralWidget)
# 创建切换主题的按钮
self.toggleThemeBtn = QPushButton("切换")
self.toggleThemeBtn.clicked.connect(self.toggleTheme)
layout.addWidget(self.toggleThemeBtn)
# 默认主题
self.currentTheme = "light"
def toggleTheme(self):
if self.currentTheme == "light":
self.applyDarkTheme()
self.currentTheme = "dark"
else:
self.applyLightTheme()
self.currentTheme = "light"
def applyLightTheme(self):
self.setStyleSheet("""
QPushButton {background-color: white;color: black;}
QMainWindow {background-color: lightgray;}
""")
def applyDarkTheme(self):
self.setStyleSheet("""
QPushButton {background-color: black;color: white;}
QMainWindow {background-color: darkgray;}
""")
if __name__ == "__main__":
app = QApplication(sys.argv)
window = MainWindow()
window.show()
sys.exit(app.exec())
- 上一篇:使用html写一个简单的登录界面
- 下一篇:制作一个支持浅色/深色主题切换的页面
相关推荐
- EU Said to Accept a 10% U.S. Universal Tariff while Seeking Exemptions for Key Sectors
-
TMTPOST--TheEuropeanUnionmaymakeconcessionstosecureexemptionsfromtariffsonkeysectors...
- 抖音品质建设 - iOS启动优化《实战篇》
-
前言启动是App给用户的第一印象,启动越慢,用户流失的概率就越高,良好的启动速度是用户体验不可缺少的一环。启动优化涉及到的知识点非常多,面也很广,一篇文章难以包含全部,所以拆分成两部分:原理和实战...
- 荷兰引进美国诗人阿曼达·戈尔曼诗作,因译者肤色遭抵制
-
记者|刘亚光阿曼达在拜登就职典礼上朗诵诗歌。图源:PatrickSemansky/AssociatedPress阿曼达·戈尔曼(AmandaGorman)出生于1998年,自小患有语言障碍,...
- EU and U.S. Upbeat on Trade Deal Ahead of July Deadline
-
TMTPOST--TheEuropeanUnionandtheUnitedStatesseemupbeatontheirtradeagreementtoavoidtr...
- “过期食品”英文怎么说?(过期食品)
-
在购买食品时,我们都会特别留意一下食物的保质期有多久,是否新鲜,以免买到过期的商品。TheafternoonteaspreadatThePeninsulaBoutiqueandCaf...
- 世界首富撩妹露骨短信遭曝光 网友评论亮了
-
原标题:世界首富如何撩妹?亚马逊创始人贝索斯给情妇的露骨短信曝光这周最大的一个瓜,可能就是亚马逊首席执行官杰夫·贝佐斯(JeffBezos)与妻子麦肯齐(MacKenzie)离婚的惊人消息。紧接...
- 征收熊孩子“尖叫费”不合理?店主回怼网友
-
爱尔兰一家很受欢迎的咖啡馆要收“孩童尖叫费”,网友们。。。爱尔兰一咖啡店店主5月4日在脸书发帖,表示要向带有吵闹孩童的顾客多收15%的额外费用,引发了大批网友的议论。原贴内容如下:图viaFaceb...
- Rationality, objectivity and pragmatism win the day in Geneva to benefit of all
-
ApressbriefingisheldbytheChinesesidefollowingtheChina-UShigh-levelmeetingoneconomica...
- Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析|6大应用场景实战
-
这篇文章是关于Dify「模板转换」节点的终极指南,解析了基于Jinja2模板引擎的动态文本生成技巧,涵盖多源文本整合、知识检索结构化、动态API构建及个性化内容生成等六大应用场景,助力开发者高效利用模...
- 微软 Edge 浏览器 96.0.4664.93 稳定版发布:修复大量安全问题
-
IT之家12月12日消息,据外媒mspoweruser消息,微软12月11日为Edge浏览器推出了96.0.4664.93稳定版。该版本没有增加新功能,而是修复了大量漏洞,...
- HarmonyOS NEXT仓颉开发语言实战案例:健身App
-
各位好,今日分享一个健身app的首页:这个页面看起比之前的案例要稍微复杂一些,主要在于顶部部分,有重叠的背景,还有偏移的部分。重叠布局可以使用Stack容器实现,超出容器范围的偏移可以使用负数间距来实...
- 如果使用vue3.0实现一个modal,你会怎么设计?
-
这是个很好的问题!设计一个Vue3.0Modal时,我建议按照可复用、高扩展、简洁的原则来实现。下面我给你一个清晰的设计思路,涵盖组件拆分、使用方式以及Vue3中特性(如Telepor...
- 在进行APP切图的前,我们需要做什么?
-
切图是个技术活,小伙伴们千万不能忽视切图的重要性噢,前文介绍了设计的七大元素,那么我们现在来看看在切图之前,我们需要做什么呢?。1、和客户端的技术沟通好用不同的框架来实现的时候,图会有不一样的切法。...
- 独立开发问题记录-margin塌陷(独立提出历史问题)
-
一、概述往事如风,一周就过去了。上周在Figma里指点江山,这周在前端代码里卑微搬砖。回想上周,在Figma中排列组合,并且精确到1像素。每设计出一个页面,成就感就蹭蹭往上涨。没想到还没沾沾自喜多久,...
- 循序渐进Vue+Element 前端应用开发(8)—树列表组件的使用
-
在我前面随笔《循序渐进VUE+Element前端应用开发(6)---常规Element界面组件的使用》里面曾经介绍过一些常规的界面组件的处理,主要介绍到单文本输入框、多文本框、下拉列表,以及按钮...
- 一周热门
- 最近发表
-
- EU Said to Accept a 10% U.S. Universal Tariff while Seeking Exemptions for Key Sectors
- 抖音品质建设 - iOS启动优化《实战篇》
- 荷兰引进美国诗人阿曼达·戈尔曼诗作,因译者肤色遭抵制
- EU and U.S. Upbeat on Trade Deal Ahead of July Deadline
- “过期食品”英文怎么说?(过期食品)
- 世界首富撩妹露骨短信遭曝光 网友评论亮了
- 征收熊孩子“尖叫费”不合理?店主回怼网友
- Rationality, objectivity and pragmatism win the day in Geneva to benefit of all
- Dify「模板转换」节点终极指南:动态文本生成进阶技巧(附代码)Jinja2引擎解析|6大应用场景实战
- 微软 Edge 浏览器 96.0.4664.93 稳定版发布:修复大量安全问题
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)
- opacity 属性 (32)