Question

我是Qt的新手。如何创建这样的颜色选择器控件？我需要将它放在另一个小部件或对话框上。选定的颜色应该用白色矩形圆整或用另一种方式区分。

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

Answer 1

您可以使用QtColorPicker ：QtColorPicker类提供了一个窗口小部件，用于从弹出颜色网格中选择颜色。

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

<强>参考：

http://doc.qt.io/qt-4.8/qcolordialog.html

http://docs.huihoo.com/qt/solutions/4/qtcolorpicker/qtcolorpicker.html

Answer 2

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

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();

Answer 3

不是最好的方法，但它只是用自定义按钮，网格布局和样式表来展示这个想法。最好是自己创建自定义Widget并在其中绘画。

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>

mainwindow.h

#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

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);
}

custombutton.h

#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

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);
}

的main.cpp

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

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

    return a.exec();
}

这是一份工作草案。不要在发布中使用它:)它只是为了表明如何做到这一点。

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

3 个答案: