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

pyqt6 制作一个颜色调节器 02

2024-11-15 248
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
本文涉及的产品
Redis 开源版，标准版 2GB
推荐场景：
搭建游戏排行榜
RDS MySQL Serverless 基础系列，0.5-2RCU 50GB
推荐场景：
学生管理系统数据库设计 搭建个人博客
云数据库 Tair（兼容Redis），内存型 2GB
推荐场景：
通过缓存加速数据库访问
简介： 本文介绍了如何使用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

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

路卿老师
目录
相关文章
路卿老师
|
11月前
|
Python
pyqt6 制作一个颜色调节器 01
本文介绍了一个使用 PyQt 制作的颜色调节器，通过滑动滚动条或旋钮来调整 RGB 三色，实现颜色的微调。具体步骤包括：1. 设计 UI 页面；2. 分析颜色调整逻辑；3. 将数据反馈到 UI 页面。最终实现了颜色随滑块变化而实时更新的效果。
路卿老师
268 1
路卿老师
|
11月前
pyqt6 绘图案例
本文介绍了三个使用 PyQt6 绘制图形的案例：绘制奥运图片、绘制五角星和绘制时钟。每个案例都提供了详细的代码示例和效果图，帮助读者更好地理解和实现这些图形绘制功能。
路卿老师
284 1
路卿老师
|
11月前
|
Java 程序员 PHP
01 入门PHP就来我这-安装phpstudy
路老师的PHP入门教程，带你从零开始学习PHP。首先下载并安装phpStudy，接着配置域名和端口，最后创建并运行第一个PHP文件。内容详实，适合初学者。
路卿老师
221 3
01 入门PHP就来我这-安装phpstudy
路卿老师
|
11月前
|
Shell Linux
Shell基础 01
Shell 是一种脚本语言，用于操作 Linux 服务器。本文介绍了 Shell 变量的定义和作用域，以及多命令运行的练习。变量定义时需注意字符串的引用方式，变量可分为局部和全局。多命令运行中，通过逻辑运算符 `&&` 和 `||` 实现条件判断和命令执行。
路卿老师
151 5
路卿老师
|
11月前
|
JavaScript PHP
17 PHP 实现批量删除功能
路老师在本文中继续优化图书删除功能，实现批量删除图书。通过添加删除按钮、表格前的复选框以及实现PHP后端逻辑，展示了完整的删除流程和效果。
路卿老师
133 5
路卿老师
|
11月前
|
安全 Linux Shell
用户和组高级操作
本文介绍了Linux系统中用户和组管理的基本操作，包括使用`usermod`命令修改用户属性、使用`passwd`和`usermod`命令禁用和恢复用户账户、使用`userdel`命令删除用户账户、使用`groupadd`、`groupdel`和`groupmod`命令管理组群，以及使用`gpasswd`命令为组群添加用户。此外，还介绍了`su`和`sudo`命令的使用方法，帮助用户在不同身份之间切换。
路卿老师
180 4
路卿老师
|
11月前
|
域名解析 网络协议 虚拟化
vmware 提供的三种网络工作模式
本文介绍了VMware虚拟机的三种网络工作模式：Bridged（桥接模式）、NAT（网络地址转换模式）和Host-Only（仅主机模式）。桥接模式将虚拟机与主机通过虚拟网桥连接，实现与物理网络的直接通信；NAT模式通过虚拟NAT设备和DHCP服务器使虚拟机联网；Host-Only模式则将虚拟机与外网隔离，仅与主机通信。此外，文章还简要介绍了网络相关的基础知识，包括主机名、IP地址、子网掩码、默认网关和DNS服务器。
路卿老师
577 4
路卿老师
|
11月前
|
PHP
29 JpGraph图像绘制库
路老师在知乎上分享了PHP语言的知识，帮助大家入门并深入了解PHP。本文介绍了JpGraph库的下载、使用及中文乱码设置，通过实例展示了如何使用JpGraph绘制折线图。
路卿老师
132 2
路卿老师
|
11月前
|
PHP
36 玩玩 ThinkPHP
本文介绍如何使用 PHPStudy 和 Composer 安装并配置 ThinkPHP 6。主要内容包括：创建工程目录、安装包管理工具 Composer、下载 ThinkPHP 架构包以及测试运行和配置。最后展示了 ThinkPHP 的目录结构和一些基本配置。通过这些步骤，你可以快速搭建一个 ThinkPHP 6 的开发环境。
路卿老师
155 1
路卿老师
|
11月前
|
前端开发 PHP
33 多文件上传及文件下载
路老师分享PHP语言知识，涵盖多文件上传和文件下载功能。多文件上传只需将表单中的文件域名称改为数组形式，文件下载则通过`header()`函数实现强制下载。详细代码示例和操作步骤，助你轻松掌握PHP核心技术。
路卿老师
156 1

数据库

热门文章

最新文章

  • 1
    ETCD系列之一：简介
  • 2
    德哥的PostgreSQL私房菜 - 史上最屌PG资料合集
  • 3
    什么场景应该用 MongoDB ？
  • 4
    PostgreSQL 如何实现批量更新、删除、插入
  • 5
    MongoDB Sharded cluster架构原理
  • 6
    Redis Stream——作为消息队列的典型应用场景
  • 7
    在Docker上玩转PostgreSQL -- Mac篇
  • 8
    PostgreSQL upsert功能(insert on conflict do)的用法
  • 9
    Linux 性能诊断 perf使用指南
  • 10
    PostgreSQL 9种索引的原理和应用场景
  • 1
    基于RDS Supabase 服务高效构建轻量级应用，完成任务可赢取淘公仔、加湿器等好礼！
    16
  • 2
    如何构建企业级数据分析助手：Data Agent 开发实践
    57
  • 3
    java零基础学习者入门课程
    25
  • 4
    当当接口开发避坑指南：3 大痛点 + 签名模板，0 失败接入商品详情接口
    20
  • 5
    AI Agent越用越笨？阿里云AnalyticDB「AI上下文工程」一招破解！
    30
  • 6
    AI Agent的未来之争：任务规划，该由人主导还是AI自主？——阿里云RDS AI助手的最佳实践
    96
  • 7
    某鱼电商接口架构深度剖析：从稳定性到高性能的技术密码
    25
  • 8
    Kubernetes 场景下的 StarRocks 灾备体系：Cluster Snapshot 实践解析
    30
  • 9
    告别 “搜不到 / 慢半拍”！搜好货商品搜索接口技术拆解
    19
  • 10
    Python 网络请求架构——统一 SOCKS5 接入与配置管理
    38

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云oss简介和如何对接使用