AI 助理
文档备案控制台
开发者社区 数据库 文章 正文

pyqt6 制作一个颜色调节器 02

2024-11-15 364
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
RDS AI 助手，专业版
RDS MySQL DuckDB 分析主实例，基础系列 4核8GB
RDS MySQL DuckDB 分析主实例，集群系列 4核8GB
简介： 本文介绍了如何使用PyQt6实现一个颜色调节器。首先创建了一个显示RGB颜色值变化的标签，然后通过三个旋钮（QDial）分别控制红、绿、蓝三种颜色的值，并在旋钮下方显示当前值。通过嵌套布局实现了旋钮和标签的排列，最终实现了颜色值的变化和显示。完整代码也一并提供。

接下来我们来学习下右侧的旋钮实现的颜色调节器的功能：

4 同样先进性UI设计

先创建一个文本颜色标签，用来展示随着rgb变化而变化的颜色，这是舞台。

                self.labelColor = QLabel()
        # 设置标签的背景色
        self.labelColor.setAutoFillBackground(True)
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(255, 0, 0))  # 红色背景
        self.labelColor.setPalette(palette)
        self.ltk = QLabel()
        self.ltext = QLabel()
        self.ltext.setText("颜色值：(255, 0, 0)")

image.gif

接着创建旋钮，旋钮是QDial类的实例。我们在旋钮下方配置旋钮变化的数字标签。

        #左侧旋钮，代表红色
        self.dial = QDial()
        self.dial.setRange(0,255)
        self.dial.setNotchesVisible(True)
        self.dial.valueChanged.connect(self.onDialValueChanged)
        #左侧旋钮下标签文字，默认为0
        self.lb = QLabel('0', self)
        self.lb.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb.setFont(QFont('Arial Black', 16))
        #中间旋钮，代表绿色
        self.dial2 = QDial()
        self.dial2.setRange(0, 255)
        self.dial2.setNotchesVisible(True)
        self.dial2.valueChanged.connect(self.onDialValueChanged)
        #中间旋钮下标签文字，默认为0
        self.lb2 = QLabel('0', self)
        self.lb2.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb2.setFont(QFont('Arial Black', 16))
        #右侧旋钮，代表蓝色
        self.dial3 = QDial()
        self.dial3.setRange(0, 255)
        self.dial3.setNotchesVisible(True)
        self.dial3.valueChanged.connect(self.onDialValueChanged)
        #右侧旋钮下标签文字，默认为0
        self.lb3=QLabel('0',self)
        self.lb3.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb3.setFont(QFont('Arial Black',16))

image.gif

此时，所有的按钮和页面都搞好了，但是有个问题，不知道你注意没有：

1 旋钮在上，文字在下。怎么实现？

2 旋钮和文字又和显示颜色的那部分控件位置不一样，怎么实现？

很简单，先回答问题1：我们通过添加垂直布局，就可以实现旋钮在上，文字在下了。不是很easy吗？

但是问题2呢？此时你就得考虑嵌套布局了。

看代码，这个是实现问题1的旋钮在上，文字在下布局。

        #创建水平布局，把所哟的旋钮在上文字在线的垂直布局当成儿子放进去
        hlayout = QHBoxLayout(self)
        vlayout = QVBoxLayout(self)
        vlayout.addWidget(self.dial)
        vlayout.addWidget(self.lb)
        vlayout2 = QVBoxLayout(self)
        vlayout2.addWidget(self.dial2)
        vlayout2.addWidget(self.lb2)
        vlayout3 = QVBoxLayout(self)
        vlayout3.addWidget(self.dial3)
        vlayout3.addWidget(self.lb3)
        hlayout.addLayout(vlayout)
        hlayout.addLayout(vlayout2)
        hlayout.addLayout(vlayout3)

image.gif

这里是颜色显示处的布局：

        textVlayout = QVBoxLayout()
        textVlayout.addWidget(self.labelColor)
        textVlayout.addWidget(self.ltext)
        textVlayout.addWidget(self.ltk)

image.gif

此时，我们得到的布局有两个：按钮组对应的水平布局，和颜色显示组对应的垂直布局。如果我们现在再来一个大的布局，把这些孙子都装进去，那不就搞定了吗？

        #创建爷爷级布局，把前面的孙子儿子布局都装进去，就搞定了
        ww_layout = QVBoxLayout(self)
        ww_layout.addLayout(textVlayout)
        ww_layout.addLayout(hlayout)
        self.setLayout(ww_layout)

image.gif

image.gif 编辑

注意：布局这一块，很容易让人迷糊，因此要多思考，最好找张草稿纸画一下。

逻辑槽函数和第一个案例的滑块相似，不卖关子了，直接贴出来：

        def onDialValueChanged(self):
        self.lb.setText(str(self.dial.value()))
        self.lb2.setText(str(self.dial2.value()))
        self.lb3.setText(str(self.dial3.value()))
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(self.dial.value(), self.dial2.value(), self.dial3.value()))  # 红色背景
        self.labelColor.setPalette(palette)
        self.ltext.setText("颜色值：(%s, %s, %s)" % (self.dial.value(), self.dial2.value(), self.dial3.value()))

image.gif

5 完整代码2

这时候就完成了所有的功能，完整代码列出来：

# -*- coding:utf-8 -*-
"""
------------------------------------------------
File Name: 旋钮.py
Description:
Author: lzq
date:2024-07-27 19:50
------------------------------------------------
"""
import sys
from PyQt6.QtCore import Qt
from PyQt6.QtGui import QFont, QColor
from PyQt6.QtWidgets import QDialog, QPushButton, QVBoxLayout, QApplication, QWidget, QDial, QLabel, QHBoxLayout
class MyWidget(QWidget):
    def __init__(self, parent=None):
        super(MyWidget, self).__init__(parent)
        self.setWindowTitle("QDial旋钮测试")
        self.resize(330,100)
        ww_layout = QVBoxLayout(self)
        self.labelColor = QLabel()
        # 设置标签的背景色
        self.labelColor.setAutoFillBackground(True)
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(255, 0, 0))  # 红色背景
        self.labelColor.setPalette(palette)
        self.ltk = QLabel()
        self.ltext = QLabel()
        self.ltext.setText("颜色值：(255, 0, 0)")
        textVlayout = QVBoxLayout()
        textVlayout.addWidget(self.labelColor)
        textVlayout.addWidget(self.ltext)
        textVlayout.addWidget(self.ltk)
        self.dial = QDial()
        self.dial.setRange(0,255)
        self.dial.setNotchesVisible(True)
        self.dial.valueChanged.connect(self.onDialValueChanged)
        self.lb = QLabel('0', self)
        self.lb.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb.setFont(QFont('Arial Black', 16))
        self.dial2 = QDial()
        self.dial2.setRange(0, 255)
        self.dial2.setNotchesVisible(True)
        self.dial2.valueChanged.connect(self.onDialValueChanged)
        self.lb2 = QLabel('0', self)
        self.lb2.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb2.setFont(QFont('Arial Black', 16))
        self.dial3 = QDial()
        self.dial3.setRange(0, 255)
        self.dial3.setNotchesVisible(True)
        self.dial3.valueChanged.connect(self.onDialValueChanged)
        self.lb3=QLabel('0',self)
        self.lb3.setAlignment(Qt.AlignmentFlag.AlignCenter)
        self.lb3.setFont(QFont('Arial Black',16))
        hlayout = QHBoxLayout(self)
        vlayout = QVBoxLayout(self)
        vlayout.addWidget(self.dial)
        vlayout.addWidget(self.lb)
        vlayout2 = QVBoxLayout(self)
        vlayout2.addWidget(self.dial2)
        vlayout2.addWidget(self.lb2)
        vlayout3 = QVBoxLayout(self)
        vlayout3.addWidget(self.dial3)
        vlayout3.addWidget(self.lb3)
        hlayout.addLayout(vlayout)
        hlayout.addLayout(vlayout2)
        hlayout.addLayout(vlayout3)
        # self.setLayout(hlayout)
        ww_layout.addLayout(textVlayout)
        ww_layout.addLayout(hlayout)
        self.setLayout(ww_layout)
    def onDialValueChanged(self):
        self.lb.setText(str(self.dial.value()))
        self.lb2.setText(str(self.dial2.value()))
        self.lb3.setText(str(self.dial3.value()))
        palette = self.labelColor.palette()
        palette.setColor(self.labelColor.backgroundRole(), QColor(self.dial.value(), self.dial2.value(), self.dial3.value()))  # 红色背景
        self.labelColor.setPalette(palette)
        self.ltext.setText("颜色值：(%s, %s, %s)" % (self.dial.value(), self.dial2.value(), self.dial3.value()))
if __name__=='__main__':
    app = QApplication(sys.argv)
    w = MyWidget()
    w.show()
    sys.exit(app.exec())

image.gif

本文到此结束，有本事你就别点赞，别关注我。路老师一生清贫，上有老下有小，让我一个人默默的付出吧！

路卿老师-18703
目录
相关文章
LucianaiB
|
6天前
|
人工智能 数据可视化 安全
王炸组合！阿里云 OpenClaw X 飞书 CLI，开启 Agent 基建狂潮！(附带免费使用6个月服务器)
本文详解如何用阿里云Lighthouse一键部署OpenClaw，结合飞书CLI等工具，让AI真正“动手”——自动群发、生成科研日报、整理知识库。核心理念：未来软件应为AI而生，CLI即AI的“手脚”，实现高效、安全、可控的智能自动化。
LucianaiB
18014 12
王炸组合！阿里云 OpenClaw X 飞书 CLI，开启 Agent 基建狂潮！(附带免费使用6个月服务器)
LucianaiB
|
18天前
|
人工智能 JSON 机器人
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
本文带你零成本玩转OpenClaw：学生认证白嫖6个月阿里云服务器，手把手配置飞书机器人、接入免费/高性价比AI模型（NVIDIA/通义），并打造微信公众号“全自动分身”——实时抓热榜、AI选题拆解、一键发布草稿，5分钟完成热点→文章全流程！
LucianaiB
29547 141
让龙虾成为你的“公众号分身” | 阿里云服务器玩Openclaw
$雪地伤孤$
|
7天前
|
人工智能 JSON 监控
Claude Code 源码泄露：一份价值亿元的 AI 工程公开课
我以为顶级 AI 产品的护城河是模型。读完这 51.2 万行泄露的源码，我发现自己错了。
$雪地伤孤$
4615 20
YUNDASHI
|
6天前
|
人工智能 API 开发者
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到？最新解决方案
阿里云百炼Coding Plan Lite已停售，Pro版每日9:30限量抢购难度大。本文解析原因，并提供两大方案：①掌握技巧抢购Pro版；②直接使用百炼平台按量付费——新用户赠100万Tokens，支持Qwen3.5-Max等满血模型，灵活低成本。
YUNDASHI
1463 3
阿里云百炼 Coding Plan 售罄、Lite 停售、Pro 抢不到？最新解决方案

数据库

热门文章

最新文章

  • 1
    ETCD系列之一：简介
  • 2
    德哥的PostgreSQL私房菜 - 史上最屌PG资料合集
  • 3
    redis4.0、codis、阿里云redis 3种redis集群对比分析
  • 4
    NoSQL最新现状和趋势：云NoSQL数据库将成重要增长引擎
  • 5
    什么场景应该用 MongoDB ？
  • 6
    PostgreSQL 如何实现批量更新、删除、插入
  • 7
    MongoDB Sharded cluster架构原理
  • 8
    Redis Stream——作为消息队列的典型应用场景
  • 9
    在Docker上玩转PostgreSQL -- Mac篇
  • 10
    DRDS 数据恢复重磅发布，全方位保障您的数据安全
  • 1
    MySQL JSON全文搜索空间数据怎么管？慢查询+索引失效+数据混乱的痛点解决与管理体系全方案展示
    19
  • 2
    MySQL数据库数据加密+备份+恢复+高可用+监控 全面管理体系建设
    31
  • 3
    MySQL数据库性能安全容量自动化策略管理体系全面建设
    24
  • 4
    WHERE、ORDER BY、LIMIT三大神器，让你的查询精准又高效！
    17
  • 5
    智能数据库运维大脑 DAS Agent 每日免费试用开启，邀你体验 AI 驱动的数据库自治！
    39
  • 6
    外卖点餐系统开发选择开源还是租赁？技术可控性对比分析
    29
  • 7
    设计师转行学数据库第三天：我的MySQL操作避坑指南！
    37
  • 8
    毕业设计电商系统怎么快速上线？Spring Boot+Vue架构+阿里云全栈服务部署实战
    77
  • 9
    数据库分类一次讲清｜转行学DB第2天
    83
  • 10
    从PS到SQL，一个设计小妹的数据库“破圈”日记：5分钟搞懂，数据库到底是个啥？
    94

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    PHP：将本地文件上传到阿里云OSS存储