❝扁平化的风格的颜色栏,类似于QCheckBox控件单项选择的功能。❞
QList<QColor> colorList;
colorList << "#EC7063"
<< "#1ABC9C"
<< "#2ECC71"
<< "#F1C40F"
<< "#34495E";
/* 传入颜色列表 */
ColorBar colorBar(colorList);
colorBar.setWindowTitle(QString::fromLocal8Bit("颜色栏 By Qt君"));
colorBar.resize(580, 140);
/* 捕获按钮事件(Qt5风格信号槽) */
QObject::connect(&colorBar, qOverload<QAbstractButton *>(&ColorBar::clicked),
[](QAbstractButton *btn) {
ColorButton *colorBtn = static_cast<ColorButton*>(btn);
qDebug() << colorBtn->color();
});
colorBar.show();
颜色栏由ColorBar和ColorButton组成。
ColorBar::ColorBar(QList<QColor> colorList, QWidget *parent) :
QWidget(parent)
{
/* 添加一个按钮组 */
m_buttonGroup = new QButtonGroup(this);
QHBoxLayout *hLayout = new QHBoxLayout(this);
/* 设置按钮之间的分隔距离 */
hLayout->setSpacing(12);
/* 设置边距距离 */
hLayout->setContentsMargins(25, 3, 25, 3);
foreach (const QColor each, colorList) {
ColorButton *btn = new ColorButton(each, this);
/* 跟随布局管理器自动调整大小 */
btn->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);
/* 开启按下不回弹事件 */
btn->setCheckable(true);
hLayout->addWidget(btn);
m_buttonGroup->addButton(btn);
}
this->setLayout(hLayout);
connect(m_buttonGroup, SIGNAL(buttonClicked(int)), this, SIGNAL(clicked(int)));
connect(m_buttonGroup, SIGNAL(buttonClicked(QAbstractButton*)), this, SIGNAL(clicked(QAbstractButton*)));
}
void ColorBar::paintEvent(QPaintEvent *)
{
QPainter painter(this);
/* 开启抗锯齿 */
painter.setRenderHint(QPainter::Antialiasing);
/* 画背景边框 */
painter.setPen(QPen(QColor("black"), 2));
painter.drawRect(QRectF(rect()));
}
ColorButton::ColorButton(QColor color, QWidget *parent) :
m_color(color),
m_isEntered(false),
QPushButton(parent)
{
}
void ColorButton::setColor(const QString &color)
{
m_color = color;
update();
}
QColor ColorButton::color() const
{
return m_color;
}
void ColorButton::paintEvent(QPaintEvent *)
{
QPainter painter(this);
/* 开启抗锯齿功能 */
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(QColor("#00000000"));
float w = width();
float h = height();
float scale = 0.75;
float size = w > h ? h : w;
size = size * scale;
/* 鼠标进入控件画背景颜色 */
if (m_isEntered) {
painter.fillRect(QRect(0, 0, w, h), QColor("#90DEDEDE"));
}
if (this->isChecked()) {
/* 画外圈 */
{
float x = (w - size)/2;
float y = (h - size)/2;
painter.setBrush(QBrush(m_color));
painter.drawEllipse(QRectF(x, y, size, size));
}
/* 画空白圈 */
{
float x1 = (w - size * 0.9)/2;
float y1 = (h - size * 0.9)/2;
painter.setBrush(QBrush("white"));
painter.drawEllipse(QRectF(x1, y1, size * 0.9, size * 0.9));
}
}
/* 画内圈 */
float x2 = (w - size * 0.8)/2;
float y2 = (h - size * 0.8)/2;
painter.setBrush(QBrush(m_color));
/* 画圆形 */
painter.drawEllipse(QRectF(x2, y2, size * 0.8, size * 0.8));
}
void ColorButton::enterEvent(QEvent *)
{
m_isEntered = true;
update();
}
void ColorButton::leaveEvent(QEvent *)
{
m_isEntered = false;
update();
}