Qt自定义控件 —— 颜色选择组合控件

已于 2023-03-07 09:03:16 修改
阅读量2.5k 收藏 13
点赞数 1
分类专栏： # Qt用户自定义控件 文章标签： qt ui c++
于 2023-02-09 18:00:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/YMGogre/article/details/128955257
版权

        在开始阅读本文之前，如果您有学习创建Qt自定义控件并在其他项目中引用的需求，请参考：

Linux系统下在Qt Creator中创建自定义控件并在其他项目中引用https://blog.csdn.net/YMGogre/article/details/128920804

目录

1、应用场景：

2、所需资源：

3、界面布局：

3.1、各布局/控件属性：

4、源代码：

4.1、h文件

4.2、cpp文件

4.3、ui文件

5、使用方法：

6、注意事项：

7、源码下载：

1、应用场景：

  • 当我们需要一个组合控件可以通过键盘输入或者打开Qt的颜色对话框来设置其他控件的颜色时；

2、所需资源：

(无，本质即 Qt 的几个自带控件的组合)

3、界面布局：

整体布局如下图所示，该自定义控件由一个GraphicsView、一个LineEdit、一个PushButton组成。窗口整体设置了 baseSize 为 140 × 25：

3.1、各布局/控件属性：

MyPalette属性
horizontalLayout属性
ColorDisplay属性
ColorLineEdit属性
btn_SelectColor属性

4、源代码：

4.1、h文件

/* mypalette.h */

#ifndef MYPALETTE_H
#define MYPALETTE_H

#include <QObject>
#include <QWidget>
#include <QColorDialog>
#include <QColor>
#include <QPalette>
#include <QString>
#include <QRegExpValidator>
#include <QtUiPlugin/QDesignerExportWidget>
#include <QEvent>
#include <QMouseEvent>
#include <QPushButton>

namespace Ui {
class MyPalette;
}

class QDESIGNER_WIDGET_EXPORT MyPalette : public QWidget
{
    Q_OBJECT

public:
    explicit MyPalette(QWidget *parent = nullptr);
    ~MyPalette();
    QColor currentColor();
    void setColor(int r, int g, int b, int a = 255);
    void setColor(QColor color);

protected:
    bool eventFilter(QObject *watchedm, QEvent *event) override;    //重写事件过滤器方法

signals:
    void colorchanged(QColor);              //自定义颜色改变信号

private:
    Ui::MyPalette *ui;
    QColor color = QColor(Qt::white);
};

#endif // MYPALETTE_H

4.2、cpp文件

/* mypalette.cpp */

#include "mypalette.h"
#include "ui_mypalette.h"

MyPalette::MyPalette(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::MyPalette)
{
    ui->setupUi(this);
    //QGraphicsView的鼠标事件会传递给它所显示的QGraphicsScene，然后再传递给场景中的QGraphicsItem。我们设置该控件属性：传递给父对象做鼠标事件处理
    ui->ColorDisplay->setAttribute(Qt::WA_TransparentForMouseEvents);

    /*****************************************
     * 为自定义控件的子控件安装该自定义控件的事件过滤器
     ****************************************/
    ui->ColorLineEdit->installEventFilter(this);
    ui->btn_SelectColor->installEventFilter(this);
    /*使用正则表达式限制输入(正确输入格式应当形如 ———— "255; 255; 255"，最后允许跟随一个分号以及一个0~255的alpha通道值)
     * (2[0-4][0-9];?\\s?)  ———— 限制输入200～249正整数(尾部允许跟随0～1个分号";"和空格" ")
     * (25[0-5];?\\s?)      ———— 限制输入250～255正整数(尾部允许跟随0～1个分号";"和空格" ")
     * (1[0-9][0-9];?\\s?)  ———— 限制输入100～199正整数(尾部允许跟随0～1个分号";"和空格" ")
     * ([1-9]?[0-9];?\\s?)  ———— 限制输入0～99正整数(尾部允许跟随0～1个分号";"和空格" ")
    */
    ui->ColorLineEdit->setValidator(new QRegExpValidator(QRegExp("^((2[0-4][0-9];\\s?)|(25[0-5];\\s?)|(1[0-9][0-9];\\s?)|([1-9]?[0-9];\\s?)){0,3}((2[0-4][0-9])|(25[0-5])|(1[0-9][0-9])|([1-9]?[0-9]))?$")));

    connect(ui->ColorLineEdit, &QLineEdit::textChanged, this, [=](){
        //使用正则表达式删除字符串中所有空格
        QString colorStr = ui->ColorLineEdit->text().remove(QRegExp("\\s"));
        //使用split方法按";"分号分割字符串为字符串数组
        QStringList colorStrList = colorStr.split(";");
        //当LineEdit只有rgb的值时
        if(colorStrList.size() == 3)
        {
            //使用字符串数组内容初始化一个QColor对象并赋值给color成员变量
            color = QColor(colorStrList[0].toInt(), colorStrList[1].toInt(), colorStrList[2].toInt());
            //当颜色改变时，发送“颜色改变信号”
            emit colorchanged(color);
        }
        //当LineEdit除了rgb的值还有alpha通道的值时
        else if(colorStrList.size() == 4)
        {
            //使用字符串数组内容初始化一个QColor对象并赋值给color成员变量
            color = QColor(colorStrList[0].toInt(), colorStrList[1].toInt(), colorStrList[2].toInt(), colorStrList[3].toInt());
            //当颜色改变时，发送“颜色改变信号”
            emit colorchanged(color);
        }
        //获取调色板
        QPalette pal = ui->ColorDisplay->palette();
        //设置调色板
        pal.setColor(QPalette::Base, color);
        //设置控件底色
        ui->ColorDisplay->setPalette(pal);
    });

    //当文本框编辑结束时，根据color成员变量显示其RGB字符串
    connect(ui->ColorLineEdit, &QLineEdit::editingFinished, this, [=](){
        //当alpha通道值为255(默认)时，LineEdit默认不显示alpha通道值
        if(color.alpha() == 255)
        {
            QString colorStr = QString::number(color.red()) + "; " + QString::number(color.green()) + "; " + QString::number(color.blue());
            ui->ColorLineEdit->setText(colorStr);
        }
        else
        {
            QString colorStr = QString::number(color.red()) + "; " + QString::number(color.green()) + "; " + QString::number(color.blue()) + "; " + QString::number(color.alpha());
            ui->ColorLineEdit->setText(colorStr);
        }
    });

    connect(ui->btn_SelectColor, &QPushButton::clicked, this, [=](){
        //打开一个颜色对话框并将其返回值交给局部变量_color
        QColor _color = QColorDialog::getColor();
        //判断返回的颜色是否有效
        if(_color.isValid())
        {
            //有效则改变颜色并发送信号
            color = _color;
            //当颜色改变时，发送“颜色改变信号”
            emit colorchanged(color);
        }
        //根据对话框返回的颜色修改颜色展示方块的颜色
        QPalette pal = ui->ColorDisplay->palette();
        //设置调色板
        pal.setColor(QPalette::Base, color);
        //设置控件底色
        ui->ColorDisplay->setPalette(pal);
        //根据对话框返回的颜色获取RGB三色字符串
        QString colorStr = QString::number(color.red()) + "; " + QString::number(color.green()) + "; " + QString::number(color.blue());
        ui->ColorLineEdit->setText(colorStr);
    });
}

/**
 * @brief 获取当前颜色方法
 * @return QColor   ———— 返回当前QColor颜色对象
 */
QColor MyPalette::currentColor()
{
    return color;
}

/**
 * @brief 设置颜色方法
 * @param int r ———— 红色
 * @param int g ———— 绿色
 * @param int b ———— 蓝色
 * @param int a ———— Alpha通道值(0完全透明～255完全不透明)
 */
void MyPalette::setColor(int r, int g, int b, int a)
{
    if(a == 255)
    {
        //设置RGB三色字符串
        QString colorStr = QString::number(r) + "; " + QString::number(g) + "; " + QString::number(b);
        //setText()方法也会触发QLineEdit的textChanged信号
        ui->ColorLineEdit->setText(colorStr);
    }
    else
    {
        //设置RGB三色字符串
        QString colorStr = QString::number(r) + "; " + QString::number(g) + "; " + QString::number(b) + "; " + QString::number(a);
        //setText()方法也会触发QLineEdit的textChanged信号
        ui->ColorLineEdit->setText(colorStr);
    }
}

/**
 * @brief 设置颜色方法
 * @param QColor color ———— QColor颜色对象
 */
void MyPalette::setColor(QColor color)
{
    if(color.alpha() == 255)
    {
        //设置RGB三色字符串
        QString colorStr = QString::number(color.red()) + "; " + QString::number(color.green()) + "; " + QString::number(color.blue());
        //setText()方法也会触发QLineEdit的textChanged信号
        ui->ColorLineEdit->setText(colorStr);
    }
    else
    {
        //设置RGB三色字符串
        QString colorStr = QString::number(color.red()) + "; " + QString::number(color.green()) + "; " + QString::number(color.blue()) + "; " + QString::number(color.alpha());
        //setText()方法也会触发QLineEdit的textChanged信号
        ui->ColorLineEdit->setText(colorStr);
    }
}

/**
 * @brief 重写事件过滤器方法
 * @attention 这里简要说下为什么要重写该方法，这是因为当我们的自定义控件中有其他子控件时，
 * 点击子控件的点击响应是相应到子控件上的，而通常我们希望所有子控件的父对象(也就是自定义控
 * 件本身)也会在点击这些子控件时有响应
 * @param QMouseEvent *event ———— 事件对象
 */
bool MyPalette::eventFilter(QObject *watched, QEvent *event)
{
  //拦截子控件的鼠标按下或释放事件
  if(event->type() == QEvent::MouseButtonPress || event->type() == QEvent::MouseButtonRelease)
  {
    //QEvent类型转换为QMouseEvent类型
    QMouseEvent *mouseevent = static_cast<QMouseEvent *>(event);
    this->QWidget::mousePressEvent(mouseevent);    //调用基类的mousePressEvent方法
    //如果事件的被监视对象是QPushButton
    if(qobject_cast<QPushButton *>(watched))
      this->setFocus();     //设置自定义控件本身获得焦点

    return false;     //传递事件给子控件，让其正常响应点击
    //return true;    //事件处理完毕(不传递事件给子控件，只响应自定义控件本身被选中)
  }
  //其他类型的事件交由基类处理
  return QWidget::eventFilter(watched, event);
}

MyPalette::~MyPalette()
{
    delete ui;
}

4.3、ui文件

❗ UI文件仅能在设计模式下编辑，这里仅供布局参考！

<!-- mypalette.ui -->

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MyPalette</class>
 <widget class="QWidget" name="MyPalette">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>299</width>
    <height>188</height>
   </rect>
  </property>
  <property name="baseSize">
   <size>
    <width>140</width>
    <height>25</height>
   </size>
  </property>
  <property name="windowTitle">
   <string>Form</string>
  </property>
  <property name="autoFillBackground">
   <bool>true</bool>
  </property>
  <layout class="QVBoxLayout" name="verticalLayout">
   <property name="spacing">
    <number>0</number>
   </property>
   <property name="leftMargin">
    <number>0</number>
   </property>
   <property name="topMargin">
    <number>0</number>
   </property>
   <property name="rightMargin">
    <number>0</number>
   </property>
   <property name="bottomMargin">
    <number>0</number>
   </property>
   <item>
    <layout class="QHBoxLayout" name="horizontalLayout" stretch="0,1,0">
     <property name="spacing">
      <number>2</number>
     </property>
     <property name="leftMargin">
      <number>0</number>
     </property>
     <property name="topMargin">
      <number>0</number>
     </property>
     <property name="rightMargin">
      <number>0</number>
     </property>
     <property name="bottomMargin">
      <number>0</number>
     </property>
     <item>
      <widget class="QGraphicsView" name="ColorDisplay">
       <property name="sizePolicy">
        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
         <horstretch>0</horstretch>
         <verstretch>0</verstretch>
        </sizepolicy>
       </property>
       <property name="minimumSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="maximumSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="baseSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QLineEdit" name="ColorLineEdit">
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
       <property name="text">
        <string>255; 255; 255</string>
       </property>
       <property name="maxLength">
        <number>18</number>
       </property>
      </widget>
     </item>
     <item>
      <widget class="QPushButton" name="btn_SelectColor">
       <property name="sizePolicy">
        <sizepolicy hsizetype="Fixed" vsizetype="Fixed">
         <horstretch>0</horstretch>
         <verstretch>0</verstretch>
        </sizepolicy>
       </property>
       <property name="minimumSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="maximumSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="baseSize">
        <size>
         <width>16</width>
         <height>16</height>
        </size>
       </property>
       <property name="autoFillBackground">
        <bool>true</bool>
       </property>
       <property name="text">
        <string>...</string>
       </property>
      </widget>
     </item>
    </layout>
   </item>
  </layout>
 </widget>
 <resources/>
 <connections/>
</ui>

5、使用方法：

  • 颜色选择组合控件封装了一个自定义信号 colorchanged，该信号会在颜色发生改变时被发送，使用该信号连接你的槽函数即可；

        colorchanged 信号是一个带参信号，可以传递一个 QColor 对象。比如说我们可以通过类似于以下的代码去设置一个 PushButton 控件的颜色：

connect(ui->myPalette, &MyPalette::colorchanged, this, [=](QColor color){
    QPalette pal = ui->btn->palette();
    //注：使用QPalette::Button枚举值设置按钮颜色时，alpha通道值是无效的
    pal.setColor(QPalette::Button, color);
    ui->btn->setPalette(pal);
});
  • 通过 currentColor() 成员方法可以在代码里获取对象的颜色属性，该方法返回一个 QColor 对象；
  • 通过 setColor() 成员方法可以在代码里设置对象的颜色属性，该方法有一个重载；

        当然，setColor() 成员方法也会触发发送 colorchanged 信号。

6、注意事项：

请参考文章：Qt自定义控件 —— 子控件与父控件的鼠标事件问题https://blog.csdn.net/YMGogre/article/details/129357734

💠本文提供的代码是已经解决了上面文章中涉及的问题后的代码。

7、源码下载：

CSDN下载：Qt自定义控件-颜色选择组合控件-C++文档类资源-CSDN文库https://download.csdn.net/download/YMGogre/87541452

YMGogre
关注
  • 1
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Qt 颜色选择器
12-01
Qt实现的颜色选择器，使用hsv原则，并且可以设置不透明度
Qt自定义控件实现圆盘进度条
08-25
主要为大家详细介绍了Qt自定义控件实现圆盘进度条，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
QT：颜色选择器
Yanjun2i的博客
03-05 514
Qt提供了一个现成的类。不能直接显示颜色。
【Pyside资源】基于PySide6实现的自定义控件 -插座控件-tOutlet.py
01-17
资源介绍： tOutlet.py是基于PySide6框架实现的自定义控件——插座控件。PySide6作为Qt for Python的官方绑定，提供了强大的GUI开发能力，使得开发者能够轻松创建出丰富、交互性强的桌面应用程序。 tOutlet.py插座控件作为一个高度可定制的组件，能够在PySide6应用程序中方便地集成使用。该控件模拟了现实生活中的插座外观和功能，通过简洁的API接口，用户可以轻松设置插座的颜色、大小等属性，满足不同的设计需求。 tOutlet.py控件的实现采用了PySide6的模块化设计思想，代码结构清晰、易于维护。开发者可以根据自身需求对控件进行扩展和修改，以适应不同的应用场景。 总的来说，tOutlet.py是基于PySide6实现的自定义插座控件，具有高度的可定制性和交互性。无论是用于创建家居控制应用、电气设计工具还是其他需要模拟插座功能的场景，该控件都能为开发者提供便捷、高效的解决
QT自绘滑条控件Slider，可设置横向和纵向，单滑块或者双滑块
03-21
QT自绘滑条控件Slider，可设置横向和纵向，单滑块或者双滑块 效果图：https://blog.csdn.net/qq_22723497/article/details/88723666
Qt应用开发(基础篇)——颜色选择器 QColorDialog
波塞冬的博客
08-29 2099
类继承于QDialog，是一个设计用来选择颜色的对话框部件。对话框窗口 QDialog颜色选择器一般用来让用户选择颜色，比如画图工具中选择画笔的颜色、刷子的颜色等。你可以使用静态函数getColor()直接显示对话框，然后重新选择颜色，还能选择具有透明度的颜色，选择的颜色保存在函数返回的一个QColor类型的返回值。用户通过预设的颜色表格选择颜色，或者通过输入RGB值选择，或者通过鼠标在触屏上滑动寻找想要的颜色。按下Enter键触发确认，按下ESC键触发退出。
QtColorButton——Qt自带的颜色选择按钮
尘中远的程序开发记录
11-07 2071
Qt自带的颜色选择按钮
Qt自定义控件之颜色对话框QColorDialog/Qt Color Widgets
$firecat利白的代码足迹$
04-30 7158
1、官方自带 Qt官方自带的QColorDialog类提供了一个指定颜色的对话框部件。#include <QColorDialog> 2、自定义 但是好多开源项目都使用了自定义控件Qt Color Widgets。 https://gitlab.com/mattia.basaglia/Qt-Color-Widgets https://github.c.........
QT 颜色选择器 QColorDialog 使用
zcc的博客
06-01 3418
需求：点击修改按钮 弹出 颜色选择框，确定后 给 label 设置背景色 打印： 代码：
QT 自定义混合控件——基于View/Model/Delegate的QTableView/QTreewidget/Combobox实现
04-01
完整工程代码，看完了你的QT View/Model 和 delegate就算入门了。
基于QT的亮点呼吸灯效果
06-06
基于QT的呼吸灯效果，亮点亮暗渐变，类似于呼吸灯的效果
Qt中颜色设置方法
weixin_46868980的博客
12-25 6474
Qt颜色设置方法
QT设置标签等控件字体的大小和颜色
xuechanba的博客
04-06 3226
链接: https://blog.csdn.net/weixin_30740581/article/details/96773875.
Qt/C++编写自定义控件29-颜色选取面板
Qt/C++视频监控/推流/物联网/大屏系统/自定义控件/UI定制/输入法
07-14 1162
一、前言 这个控件主要是模仿QColorDialog对话框中的颜色选取面板，提供一个十字形状的标识器，鼠标按下开始选取颜色，移动到哪就选择该处的颜色值，对应右侧颜色条放大显示，本控件的难点就是如何绘制一个边缘框限定鼠标只能在此框中移动，还有一个就是如何绘制颜色渐变的背景颜色集合，这里采用的是对每一个像素的高度区域设置不同的开始颜色+中间颜色+结束颜色，作为渐变颜色，然后设置QLinearGradi...
qt制作颜色选择控件
weixin_42887343的博客
07-15 1165
目标制作一套相对底层的颜色选择控件，内容包含各种颜色选择器，颜色选择按钮，颜色lab等。2、颜色按钮，点击按钮可出现颜色选择窗口或菜单。1、颜色lab，用于现实颜色，支持被选中状态。（4）自由颜色+可选颜色。（3）可选颜色+透明度。...
Qt | 标准、复选、单选、工具、命令按钮大全
m0_45463480的博客
04-28 246
Qt | 标准、复选、单选、工具、命令按钮大全
Qt QLineEdit详解
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
04-29 860
QLineEdit是一个单行文本编辑器。行编辑允许用户使用一组有用的编辑功能输入和编辑单行纯文本，包括撤消和重做、剪切和粘贴以及拖放。通过更改行编辑的echoMode，它也可以用作“只写”字段，用于密码等输入。文本的长度可以限制为maxLength，文本可以使用validator或inputMask进行任意约束，也可以同时使用这两种方法。在同一行编辑的validator和inputMask之间切换时，最好清除validator或输入mask，以防止出现未定义的行为。
【Qt】信号与槽
最新发布
m0_66599463的博客
04-30 1114
1、信号和槽的概述 1.1 信号的本质 1.2 槽的本质 2、信号和槽的使用 2.1 连接信号的槽 click和clicked 2.2 第二种自定义创建槽函数的方式 3、自定义信号和槽 3.1 ⾃定义信号函数书写规范 3.2 带参数得槽和函数 4、信号与槽的连接方式 4.1 一对一 4.2 一对多 4.3 多对一 5、信号和槽的其他说明 5.1 信号与槽的断开 5.2 Qt4 版本信号与槽的连接 5.3 使⽤ Lambda 表达式定义槽函数 5.4 信号与槽的优缺点
Qt QThreadPool线程池
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
04-29 553
QThreadPool类管理一个QThread集合。QThreadPool管理和重新设计单个QThread对象，以帮助降低使用线程的程序中的线程创建成本。每个Qt应用程序都有一个全局QThreadPool对象，可以通过调用globalInstance来访问该对象。要使用其中一个QThreadPool线程，请子类化QRunnable并实现run虚拟函数。然后创建该类的一个对象，并将其传递给QThreadPool::start。线程复用：线程池中的线程可以重复使用，减少了线程创建和销毁的开销。
qt自定义控件大全+designer源码
07-27
Qt自定义控件大全Designer源码是一个包含了多种自定义控件的全套源码，它主要用于在Qt设计师中使用。Qt是一个跨平台的C++应用程序开发框架，提供了丰富的图形界面控件，但有时候我们可能需要自定义一些特殊的控件来满足我们的需求。 Qt自定义控件大全Designer源码包含了很多常用的自定义控件，如自定义按钮、进度条、滑块、验证码输入框等等。这些控件的设计和实现已经封装好，我们只需要将源码添加到我们的项目中，然后在Qt设计师中直接使用即可。 使用Qt自定义控件大全Designer源码有以下几个优点： 1.提供了丰富的自定义控件选择：Qt自定义控件大全Designer源码包含了多样化的控件，可以满足不同项目的需求。无论是一些简单的控件，还是一些复杂的控件，我们都可以找到合适的选择。 2.减少开发时间和工作量：使用源码中的自定义控件可以减少我们从头开始设计和实现的工作，节省了大量的开发时间和工作量。我们只需要将源码添加到项目中并正确配置，就可以直接在设计师中使用这些自定义控件。 3.提高应用程序的美观性和用户体验：Qt自定义控件大全Designer源码中的控件经过精心设计和实现，具有良好的界面效果和用户交互体验。使用这些自定义控件可以为我们的应用程序提供更加美观和友好的界面。 总之，Qt自定义控件大全Designer源码是一个提供了多种自定义控件的全套源码，使用它可以快速、方便地实现各种自定义控件，提高应用程序的开发效率和用户体验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值