Qt：绘制带高光的按钮

Qt绘制带高光的按钮

最新推荐文章于 2025-09-23 17:05:23 发布

原创最新推荐文章于 2025-09-23 17:05:23 发布 · 737 阅读

4 ·

CC 4.0 BY-SA版权

Qt学习资料专栏收录该内容

242 篇文章

订阅专栏

本文详细介绍了如何使用Qt库为GUI应用程序设计并实现带高光效果的自定义按钮。通过覆盖QPainter的方法，结合颜色渐变和边框阴影，达到提升用户体验的视觉效果。

void Widget::paintEvent(QPaintEvent *event) 
{
    QPainter painter(this);
    painter.translate(width() / 2, height() / 2);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setPen(Qt::transparent);
    painter.fillRect(-width(), -height(), width() * 2, height() * 2, Qt::gray);

    int radius = 100;

    // 外边框
    QLinearGradient lg1(0, -radius, 0, radius);
    lg1.setColorAt(0, QColor(255, 255, 255));
    lg1.setColorAt(1, QColor(166, 166, 166));
    painter.setBrush(lg1);
    painter.drawEllipse(-radius, -radius, radius << 1, radius << 1);

    // 内边框
    radius -= 13;
    QLinearGradient lg2(0, -radius, 0, radius);
    lg2.setColorAt(0, QColor(155, 155, 155));
    lg2.setColorAt(1, QColor(255, 255, 255));
    painter.setBrush(lg2);
    painter.drawEllipse(-radius, -radius, radius << 1, radius << 1);

    // 内部的圆
    radius -= 4;
    QRadialGradient rg(0, 0, radius);
    rg.setColorAt(0, QColor(245, 0, 0));
    rg.setColorAt(0.6, QColor(210, 0, 0));
    rg.setColorAt(1, QColor(140, 0, 0));
    painter.setBrush(rg);
    painter.drawEllipse(-radius, -radius, radius << 1, radius << 1);

    // 高光
    radius -= 3;
    QPainterPath path;
    path.addEllipse(-radius, -radius - 2, radius << 1, radius << 1);
    QPainterPath bigEllipse;

    radius *= 2;
    bigEllipse.addEllipse(-radius, -radius + 140, radius << 1, radius << 1);
    path -= bigEllipse;

    QLinearGradient lg3(0, -radius / 2, 0, 0);
    lg3.setColorAt(0, QColor(255, 255, 255, 220));
    lg3.setColorAt(1, QColor(255, 255, 255, 30));
    painter.setBrush(lg3);
    painter.drawPath(path);
}