Qt学习之自定义控件——颜色下拉框

一、效果展示

二、实现

      项目需要，实现类似于MFC中的颜色下拉框，参考了多篇文章，自己写了这么一个颜色下拉框，基于QToolButton实现的。

Colorcombox.h

#ifndef COLORCOMBOX_H
#define COLORCOMBOX_H

#include <QToolButton>
#include <QRgb>

class ColorCombox : public QToolButton
{
    Q_OBJECT

public:
    ColorCombox(QWidget *parent = 0);
    ~ColorCombox();

    void setButtonIcon(const QString &imageFile, QColor color);

private:
    QMenu* createColorMenu(const char *slot, const char *slotColorBoard);
    QIcon createColorToolButtonIcon(const QString &imageFile, QColor color);
    QIcon createColorIcon(QColor color);

public:
    void setColor(QRgb color);
    QRgb getColor();

signals:
    void sigColorChanged(QColor color);

private slots:
    void OnColorChanged();           // 文本颜色设置
    void OnShowColorBoard();         // 颜色板
    void changeColor(QColor color);

private:
    QColor m_color;
};

#endif

Colorcombox.cpp

#include "Colorcombox.h"


#include <QAction>
#include <QGridLayout>
#include <QMenu>
#include <QPainter>
#include <QColorDialog>


const QColor colors[6][8] =
{
    {QColor(0, 0, 0, 255), QColor(170, 0, 0, 255), QColor(0, 85, 0, 255), QColor(170, 85, 0, 255),
    QColor(0, 170, 0, 255), QColor(170, 170, 0, 255), QColor(0, 255, 0, 255), QColor(170, 250, 0, 255)},

    {QColor(0, 0, 127, 255), QColor(170, 0, 127, 255), QColor(0, 85, 127, 255), QColor(170, 85, 127, 255),
    QColor(0, 170, 127, 255), QColor(170, 170, 127, 255), QColor(0, 255, 127, 255), QColor(170, 255, 127, 255)},

    {QColor(0, 0, 255, 255), QColor(170, 0, 255, 255), QColor(0, 85, 255, 255), QColor(170, 85, 255, 255),
    QColor(0, 170, 255, 255), QColor(170, 170, 255, 255), QColor(0, 255, 255, 255), QColor(170, 255, 255, 255)},

    {QColor(85, 0, 0, 255), QColor(255, 0, 0, 255), QColor(85, 85, 0, 255), QColor(255, 85, 0, 255),
    QColor(85, 170, 0, 255), QColor(255, 170, 0, 255), QColor(85, 255, 0, 255), QColor(255, 255, 0, 255)},

    {QColor(85, 0, 127, 255), QColor(255, 0, 127, 255), QColor(85, 85, 127, 255), QColor(255, 85, 127, 255),
    QColor(85, 170, 127, 255), QColor(255, 170, 127, 255), QColor(85, 255, 127, 255), QColor(255, 255, 127, 255)},

    {QColor(85, 0, 255, 255), QColor(255, 0, 255, 255), QColor(85, 85, 255, 255), QColor(255, 85, 255, 255),
    QColor(85, 170, 255, 255), QColor(255, 170, 255, 255), QColor(85, 255, 255, 255), QColor(255, 255, 255, 255)}
};



ColorCombox::ColorCombox(QWidget *parent) :
    QToolButton(parent)
{
    setPopupMode(QToolButton::InstantPopup );
    setMenu(createColorMenu(SLOT(OnColorChanged()), SLOT(OnShowColorBoard())));
    this->menu()->setStyleSheet("background-color:whitesmoke");
    setAutoFillBackground(true);
    this->setSizePolicy(QSizePolicy::Preferred, QSizePolicy::Preferred);
    connect(this,SIGNAL(sigColorChanged(QColor)),this,SLOT(changeColor(QColor)));
}


ColorCombox::~ColorCombox()
{

}

void ColorCombox::setButtonIcon(const QString &imageFile, QColor color)
{
    setIcon(createColorToolButtonIcon(imageFile, color));
}

QMenu *ColorCombox::createColorMenu(const char *slot, const char *slotColorBoard)
{
    // 选择其他颜色
    QToolButton *pBtnOtherColor = new QToolButton;
    pBtnOtherColor->setText(tr("其他颜色"));
    pBtnOtherColor->setFixedSize(QSize(142, 20));
    pBtnOtherColor->setAutoRaise(true);
    pBtnOtherColor->setToolTip(tr("其他颜色"));
    connect(pBtnOtherColor, SIGNAL(clicked()), this, slotColorBoard);

    // 基本色
    QGridLayout *pGridLayout = new QGridLayout;
    pGridLayout->setAlignment(Qt::AlignCenter);
    pGridLayout->setContentsMargins(0, 0, 0, 0);
    pGridLayout->setSpacing(2);

    for (int iRow = 0; iRow < 6; iRow++)
    {
        for (int iCol = 0; iCol < 8; iCol++)
        {
            QAction *action = new QAction(this);
            action->setData(colors[iRow][iCol]);
            action->setIcon(createColorIcon(colors[iRow][iCol]));
            connect(action, SIGNAL(triggered()), this, slot);

            QToolButton *pBtnColor = new QToolButton;
            pBtnColor->setFixedSize(QSize(16, 16));
            pBtnColor->setAutoRaise(true);
            pBtnColor->setDefaultAction(action);

            pGridLayout->addWidget(pBtnColor, iRow, iCol);
        }
    }

    QWidget *widget = new QWidget;
    widget->setLayout(pGridLayout);

    QVBoxLayout *pVLayout = new QVBoxLayout;
    pVLayout->addWidget(widget);
    pVLayout->addWidget(pBtnOtherColor);

    QMenu *colorMenu = new QMenu(this);
    colorMenu->setLayout(pVLayout);

    return colorMenu;
}

QIcon ColorCombox::createColorToolButtonIcon(const QString &imageFile, QColor color)
{
    QPixmap pixmap(16, 18);
    pixmap.fill(Qt::transparent);

    QPainter painter(&pixmap);
    QPixmap image(imageFile);

    QRect target(0, 0, 16, 16);
    QRect source(0, 0, 16, 16);
    painter.fillRect(QRect(0, 13, 16, 4), color);
    painter.drawPixmap(target, image, source);
    return QIcon(pixmap);

    //return QIcon("");
}

QIcon ColorCombox::createColorIcon(QColor color)
{
    QPixmap pixmap(16, 16);
    QPainter painter(&pixmap);
    painter.setPen(Qt::NoPen);
    painter.fillRect(QRect(0, 0, 16, 16), color);

    return QIcon(pixmap);
}

void ColorCombox::OnColorChanged()
{
    QAction *pFillColorAction = new QAction(this);
    pFillColorAction = qobject_cast<QAction *>(sender());
    QColor color = qvariant_cast<QColor>(pFillColorAction->data());

    this->menu()->close();
    m_color = color;
    emit sigColorChanged(m_color);
}

void ColorCombox::OnShowColorBoard()
{
    this->menu()->close();
    this->setStyleSheet("background-color:whitesmoke");
    QColorDialog colordlg(this);
    QColor color = colordlg.getColor(m_color, this, tr("颜色对话框"));
    if (!color.isValid())
    {
        emit sigColorChanged(m_color);
        return;
    }

    m_color = color;
    emit sigColorChanged(m_color);
}


void ColorCombox::changeColor(QColor color)
{
    QString strstyle = QString("background-color:rgb(%1,%2,%3);").arg(QString::number(color.red()), QString::number(color.green()), QString::number(color.blue()));
    this->setStyleSheet(strstyle);
}

void ColorCombox::setColor(QRgb color)
{
    this->m_color = (QColor)color;
    emit sigColorChanged(m_color);
}

QRgb ColorCombox::getColor()
{
    QRgb mRgb = qRgb(m_color.red(),m_color.green(),m_color.blue());
    return mRgb;
}

三、使用

    加载控件，在工程pro文件中包含控件的pri文件，例如：

然后就可以直接代码使用了，当然不要忘记包含头文件；要想像其他控件一样可以从工具箱里拖动到UI中，还需要先编译，将编译版本改为Release，然后右键项目，点击清除，执行qmake，重新构建，找到编译目录下生成的dll文件和lib文件，复制到Qt安装目录下的Tools/QtCreator/bin/plugins/designer路径下，重新打开Qt Creator，可以在工具箱里面找到自定义的控件。

   setcolor()：设置颜色下拉框当前颜色；

    getcolor()：获得颜色下拉框当前颜色；

    

PS:自定义控件步骤

1、点击【新建项目或文件】，选择模板【其他项目】--【Qt4 设计师自定义控件】，按步骤为自定义控件设置路径和名称、编译器（这里编译器的选择很重要，使用和Qt Creator版本相同的MSVC编译器）、类名、父类名等。

2、将编译版本改为Release，然后右键项目，点击清除，执行qmake，重新构建，找到编译目录下生成的dll文件和lib文件，复制到Qt安装目录下的Tools/QtCreator/bin/plugins/designer路径下，重新打开Qt Creator，可以在工具箱里面找到自定义的控件。

                                                                          

代码下载：https://download.youkuaiyun.com/download/qq_37240404/12846335

参考文章：qt实现颜色下拉框控件