如何在代码中使用Qt QColormap实现色卡效果？

我明白你想要实现那种可视化的色卡效果，之前查QColormap没找到足够编码信息对吧？其实QColormap主要是用来获取系统底层的颜色映射表（比如256色模式下的系统色），但要做出像你提供的那种可交互的色卡面板，我们可以通过自定义QWidget来绘制，灵活性会更高。下面是完整的代码示例，你可以直接复用或者按需调整：

1. 自定义色卡Widget的头文件（colorpalettewidget.h） #

#ifndef COLORPALETTEWIDGET_H
#define COLORPALETTEWIDGET_H

#include <QWidget>
#include <QColor>
#include <QVector>

class ColorPaletteWidget : public QWidget
{
    Q_OBJECT
public:
    explicit ColorPaletteWidget(QWidget *parent = nullptr);

    // 设置色卡的颜色列表
    void setColorList(const QVector<QColor>& colors);
    // 获取当前选中的颜色
    QColor selectedColor() const;

signals:
    // 颜色选中时触发的信号
    void colorSelected(const QColor& color);

protected:
    void paintEvent(QPaintEvent *event) override;
    void mousePressEvent(QMouseEvent *event) override;

private:
    QVector<QColor> m_colorList;
    QColor m_selectedColor;
    // 单个颜色块的尺寸
    const int m_blockSize = 20;
    // 每行显示的颜色块数量
    const int m_columns = 16;
};

#endif // COLORPALETTEWIDGET_H

2. 实现文件（colorpalettewidget.cpp） #

#include "colorpalettewidget.h"
#include <QPainter>
#include <QMouseEvent>

ColorPaletteWidget::ColorPaletteWidget(QWidget *parent) : QWidget(parent)
{
    // 默认初始化一组模拟系统色表的颜色
    for(int i=0; i<256; ++i){
        m_colorList.append(QColor::fromHsv(i%180, 255, 255 - (i/180)*50));
    }
    // 根据颜色数量自动计算窗口大小
    setFixedSize(m_columns * m_blockSize, (m_colorList.size() + m_columns -1)/m_columns * m_blockSize);
}

void ColorPaletteWidget::setColorList(const QVector<QColor> &colors)
{
    m_colorList = colors;
    setFixedSize(m_columns * m_blockSize, (m_colorList.size() + m_columns -1)/m_columns * m_blockSize);
    update();
}

QColor ColorPaletteWidget::selectedColor() const
{
    return m_selectedColor;
}

void ColorPaletteWidget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setPen(Qt::gray);

    for(int i=0; i<m_colorList.size(); ++i){
        int row = i / m_columns;
        int col = i % m_columns;
        QRect rect(col*m_blockSize, row*m_blockSize, m_blockSize, m_blockSize);
        // 填充颜色块
        painter.fillRect(rect, m_colorList[i]);
        // 绘制颜色块边框
        painter.drawRect(rect);

        // 给选中的颜色添加双层边框标记
        if(m_colorList[i] == m_selectedColor){
            painter.setPen(Qt::black);
            painter.drawRect(rect.adjusted(-1,-1,1,1));
            painter.setPen(Qt::gray);
        }
    }
}

void ColorPaletteWidget::mousePressEvent(QMouseEvent *event)
{
    int col = event->x() / m_blockSize;
    int row = event->y() / m_blockSize;
    int index = row * m_columns + col;
    if(index >=0 && index < m_colorList.size()){
        m_selectedColor = m_colorList[index];
        emit colorSelected(m_selectedColor);
        update();
    }
    QWidget::mousePressEvent(event);
}

3. 使用示例（main.cpp） #

#include <QApplication>
#include <QWidget>
#include <QVBoxLayout>
#include <QLabel>
#include "colorpalettewidget.h"

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);

    QWidget window;
    window.setWindowTitle("Color Palette");
    QVBoxLayout* layout = new QVBoxLayout(&window);

    ColorPaletteWidget* paletteWidget = new ColorPaletteWidget();
    layout->addWidget(paletteWidget);

    // 用于显示选中的颜色信息
    QLabel* colorLabel = new QLabel("Selected Color: None");
    colorLabel->setAlignment(Qt::AlignCenter);
    colorLabel->setStyleSheet("padding: 8px;");
    layout->addWidget(colorLabel);

    // 绑定颜色选中的信号
    QObject::connect(paletteWidget, &ColorPaletteWidget::colorSelected, [colorLabel](const QColor& color){
        colorLabel->setText(QString("Selected Color: %1").arg(color.name()));
        // 根据颜色亮度自动切换文字颜色，保证可读性
        colorLabel->setStyleSheet(QString("background-color: %1; color: %2; padding: 8px;")
                                  .arg(color.name(), color.lightness() < 128 ? "white" : "black"));
    });

    // 如果想要使用系统QColormap的颜色，可以替换成这段代码
    /*
    QVector<QColor> systemColors;
    QColormap cmap = QColormap::instance();
    for(int i=0; i<cmap.size(); ++i){
        systemColors.append(cmap.color(i));
    }
    paletteWidget->setColorList(systemColors);
    */

    window.show();
    return a.exec();
}

额外说明 #

• 你可以通过修改m_blockSize和m_columns来调整颜色块的大小和每行显示数量
• 如果想要用系统原生的色表，直接取消main.cpp里那段注释的代码即可，它会通过QColormap获取系统的颜色映射
• 色卡支持点击选中，选中的颜色会触发colorSelected信号，你可以在外部绑定逻辑处理选中后的操作

内容的提问来源于stack exchange，提问作者Rubina