前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >分享一个颜色栏

分享一个颜色栏

作者头像
Qt君
发布2020-04-15 12:40:05
7310
发布2020-04-15 12:40:05
举报
文章被收录于专栏:跟Qt君学编程

❝扁平化的风格的颜色栏,类似于QCheckBox控件单项选择的功能。❞

使用例子

代码语言:javascript
复制
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代码:
代码语言:javascript
复制
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代码:
代码语言:javascript
复制
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();
}
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-04-04,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Qt君 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 使用例子
  • 实现
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档