C++ 建议我如何使用预定义的颜色创建这样的颜色选择器

我是新来的。如何创建这样的颜色选择器控件？我需要把它放在另一个小部件或对话框上。所选颜色应为白色矩形或以另一种方式区分

我需要使用哪些控件来创建这样的小部件

---

您可以使用

QtColorPicker

：QtColorPicker类提供了一个小部件，用于从弹出的颜色网格中选择颜色

用户可以通过单击颜色选择器，或导航到它并按空格键来调用它。他们可以使用鼠标键或箭头键在网格上的颜色之间导航，并通过单击或按Enter键或空格键选择颜色。每当颜色选择器的颜色发生变化时，就会发出colorChanged（）信号

参考资料：

---

生成这种布局的代码大致如下所示：

QWidget w;
QGridLayout *grid = new QGridLayout(&w);

std::vector<QString> colors{ "red", "blue", "green", "yellow",
                             "magenta", "darkblue", "darkgreen", "black" };

static const int buttonsPerRow = 5;
for (int i = 0; i < 15; ++i)
{
  QPushButton *btn = new QPushButton(&w);
  // Customize the colour button
  btn->setMaximumSize(16, 16);
  QString qss = QString("background-color: %1").arg(colors[i % colors.size()]);
  btn->setStyleSheet(qss);
  grid->addWidget(btn, i / buttonsPerRow, i % buttonsPerRow);
}

w.show();

qw；
QGridLayout*grid=新的QGridLayout（&w）；
矢量颜色{“红”、“蓝”、“绿”、“黄”，
“洋红色”、“深蓝色”、“深绿色”、“黑色”}；
静态常量int按钮错误=5；
对于（int i=0；i<15；++i）
{
QPushButton*btn=新的QPushButton（&w）；
//自定义颜色按钮
btn->setMaximumSize（16,16）；
QString qss=QString（“背景色：%1”）.arg（颜色[i%colors.size（））；
btn->设置样式表（qss）；
grid->addWidget（btn，i/buttonsPerRow，i%buttonsPerRow）；
}
w、 show（）；

这不是最好的方法，但它只是通过自定义按钮、网格布局和样式表来展示想法。更好的做法是创建自定义小部件并自己在其内部绘制

mainwindow.ui：

<?xml version="1.0" encoding="UTF-8"?>
<ui version="4.0">
 <class>MainWindow</class>
 <widget class="QMainWindow" name="MainWindow">
  <property name="geometry">
   <rect>
    <x>0</x>
    <y>0</y>
    <width>400</width>
    <height>300</height>
   </rect>
  </property>
  <property name="windowTitle">
   <string>MainWindow</string>
  </property>
  <widget class="QWidget" name="centralWidget">
   <widget class="QWidget" name="gridLayoutWidget">
    <property name="geometry">
     <rect>
      <x>30</x>
      <y>20</y>
      <width>331</width>
      <height>201</height>
     </rect>
    </property>
    <layout class="QGridLayout" name="gridLayout"/>
   </widget>
  </widget>
  <widget class="QMenuBar" name="menuBar">
   <property name="geometry">
    <rect>
     <x>0</x>
     <y>0</y>
     <width>400</width>
     <height>19</height>
    </rect>
   </property>
  </widget>
  <widget class="QToolBar" name="mainToolBar">
   <attribute name="toolBarArea">
    <enum>TopToolBarArea</enum>
   </attribute>
   <attribute name="toolBarBreak">
    <bool>false</bool>
   </attribute>
  </widget>
  <widget class="QStatusBar" name="statusBar"/>
 </widget>
 <layoutdefault spacing="6" margin="11"/>
 <resources/>
 <connections/>
</ui>

主窗口
0
0
400
300
主窗口
30
20
331
201
0
0
400
19
顶部工具栏区域
假的

主窗口

#define MAINWINDOW_H

#include <QMainWindow>

namespace Ui {
class MainWindow;
}

class MainWindow : public QMainWindow
{
    Q_OBJECT

public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

private:
    Ui::MainWindow *ui;
};

#endif // MAINWINDOW_H

#定义主窗口
#包括
名称空间用户界面{
类主窗口；
}
类主窗口：公共QMainWindow
{
Q_对象
公众：
显式主窗口（QWidget*parent=0）；
~main窗口（）；
私人：
Ui:：MainWindow*Ui；
};
#endif//main窗口

mainwindow.cpp

#include "mainwindow.h"
#include "ui_mainwindow.h"
#include "custombutton.h"



MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->centralWidget->setStyleSheet("background-color: black;");


    QList<CustomButton *> * btnlist = new QList<CustomButton *>();

    CustomButton * btn = new CustomButton(Qt::green, btnlist);
    CustomButton * btn1 = new CustomButton(Qt::yellow, btnlist);
    CustomButton * btn2 = new CustomButton(Qt::red, btnlist);
    CustomButton * btn3 = new CustomButton(QColor(100,50,240), btnlist);
    CustomButton * btn4 = new CustomButton(QColor(50,50,240), btnlist);
    CustomButton * btn5 = new CustomButton(QColor(100,155,240), btnlist);
    CustomButton * btn6 = new CustomButton(QColor(200,50,240), btnlist);
    CustomButton * btn7 = new CustomButton(QColor(0,50,240), btnlist);

    btnlist->append(btn);
    btnlist->append(btn1);
    btnlist->append(btn2);
    btnlist->append(btn3);
    btnlist->append(btn4);
    btnlist->append(btn5);
    btnlist->append(btn6);
    btnlist->append(btn7);

    this->ui->gridLayout->addWidget(btn,1,1);
    this->ui->gridLayout->addWidget(btn1,1,2);
    this->ui->gridLayout->addWidget(btn2,1,3);
    this->ui->gridLayout->addWidget(btn3,1,4);
    this->ui->gridLayout->addWidget(btn4,1,5);

    this->ui->gridLayout->addWidget(btn5,2,1);
    this->ui->gridLayout->addWidget(btn6,2,2);
    this->ui->gridLayout->addWidget(btn7,2,3);
}

#包括“mainwindow.h”
#包括“ui_main window.h”
#包括“custombutton.h”
主窗口：：主窗口（QWidget*父窗口）：
QMainWindow（父级），
用户界面（新用户界面：：主窗口）
{
用户界面->设置用户界面（此）；
ui->centralWidget->setStyleSheet（“背景色：黑色；”）；
QList*btnlist=新的QList（）；
CustomButton*btn=新的CustomButton（Qt:：绿色，btnlist）；
CustomButton*btn1=新的CustomButton（Qt:：黄色，btnlist）；
CustomButton*btn2=新的CustomButton（Qt:：红色，btnlist）；
CustomButton*btn3=新的CustomButton（QColor（100,50240），btnlist）；
CustomButton*btn4=新的CustomButton（QColor（50,50240），btnlist）；
CustomButton*btn5=新的CustomButton（QColor（100155240），btnlist）；
CustomButton*btn6=新的CustomButton（QColor（200,50240），btnlist）；
CustomButton*btn7=新的CustomButton（QColor（0,50240），btnlist）；
btnlist->append（btn）；
btnlist->append（btn1）；
btnlist->append（btn2）；
btnlist->append（btn3）；
btnlist->append（btn4）；
btnlist->append（btn5）；
btnlist->append（btn6）；
btnlist->append（btn7）；
这个->用户界面->网格布局->添加小部件（btn，1,1）；
这个->用户界面->网格布局->添加小部件（btn1,1,2）；
这个->用户界面->网格布局->添加小部件（btn2,1,3）；
这个->用户界面->网格布局->添加小部件（btn3,1,4）；
这个->用户界面->网格布局->添加小部件（btn4,1,5）；
这个->用户界面->网格布局->添加小部件（btn5,2,1）；
这个->用户界面->网格布局->添加小部件（btn6,2,2）；
这个->用户界面->网格布局->添加小部件（btn7,2,3）；
}

自定义按钮

#ifndef CUSTOMBUTTON_H
#define CUSTOMBUTTON_H

#include <QWidget>
#include <QPushButton>
#include <QColor>

class CustomButton : public QPushButton
{
public:
    CustomButton(QColor color, QList<CustomButton *> *);

public slots:
    void release(bool);

private:
    QList<CustomButton *>       * btn_list;

};

#endif // CUSTOMBUTTON_H

\ifndef CUSTOMBUTTON\u H
#定义自定义按钮
#包括
#包括
#包括
类CustomButton:公共QPushButton
{
公众：
自定义按钮（QColor颜色，QList*）；
公众时段：
无效释放（bool）；
私人：
QList*btn_列表；
};
#endif//CUSTOMBUTTON\u H

custombutton.cpp

#include "custombutton.h"



CustomButton::CustomButton(QColor color, QList<CustomButton *> * list)
{
    this->btn_list = list;
    QString StyleSheet = QString("QPushButton:checked { border: 2px solid white; background-color: %1; } QPushButton { border: 0px solid white; background-color: %1; }").arg(color.name());
    this->setCheckable(true);
    this->setStyleSheet(StyleSheet);
    this->setFixedSize(56, 56);
    this->show();
    connect(this, &CustomButton::toggled, this, &CustomButton::release );
}

void CustomButton::release(bool checked)
{
    int ind = this->btn_list->indexOf(this);
    CustomButton * tmp = this->btn_list->takeAt(ind);

    if(checked)
    {
        this->setChecked(true);

        for(int i = 0; i < this->btn_list->count(); i++)
        {
            this->btn_list->at(i)->setChecked(false);
        }
    }

    this->btn_list->append(this);
}

#包括“custombutton.h”
CustomButton:：CustomButton（QColor颜色，QList*列表）
{
此->btn\U列表=列表；
QString样式表=QString（“QPushButton:选中{边框：2px纯白；背景色：%1；}QPushButton{边框：0px纯白；背景色：%1；}”）.arg（color.name（））；
此->可设置检查（真）；
此->设置样式表（样式表）；
此->设置固定大小（56,56）；
此->显示（）；
连接（此、&CustomButton:：toggled、此、&CustomButton:：release）；
}
作废自定义按钮：：释放（布尔选中）
{
int ind=this->btn\u list->indexOf（this）；
CustomButton*tmp=this->btn\U list->takeAt（ind）；
如果（选中）
{
此->设置已选中（true）；
对于（int i=0；ibtn_list->count（）；i++）
{
此->btn\U列表->at（i）->设置检查（假）；
}
}
此->btn\U列表->附加（此）；
}

main.cpp

#include "mainwindow.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    MainWindow w;
    w.show();

    return a.exec();
}

#包括“mainwindow.h”
#包括
int main（int argc，char*argv[]）
{
质量保证申请a（argc、argv）；
主窗口w；
w、 show（）；
返回a.exec（）；
}

---

这是一份工作草案。不要在发行版中使用此选项：）这只是为了说明如何做到这一点

什么是彩色矩形：按钮、标签？@vahancho我需要它看起来像这样。我可以自由选择任何工具来实现它，甚至可以自己用OpenGL渲染。@Yola，如果你可以自由使用任何工具，为什么你说它应该是小部件？您可以在QML中在一分钟内完成此操作。@Xplatforms项目不使用QML。