Qt 自绘开关按钮以及设计器中的提升为用法

文章目录

- 自绘按钮实现
- - 概要
  - 效果图
  - 代码
- '提升为'用法
- - 介绍
  - 步骤
- 总结

自绘按钮实现

概要

当我们需要一个开关样式的QPushbutton，没有图片的话，我们可以采用自绘的形式实现。
且使用QtDesinger中提升为Promote to的功能加入界面中，而不是使用代码的方式。

效果图

请添加图片描述

代码

代码相对简单，主要看一下绘制的实现

void SwitchButton::paintEvent(QPaintEvent *event)
{
    QPushButton::paintEvent(event); // 调用基类的绘制事件

    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);

    // 定义滚珠的半径
    qreal ballRadius = height() * 0.4; // 可以根据需要调整滚珠大小
    qreal padding = (height() - ballRadius * 2) / 2; // 按钮内部边距

    // 绘制按钮的背景
    QRectF rect(padding, padding, width() - padding * 2, height() - padding * 2);
    painter.setPen(Qt::NoPen);
    if(m_isAutoMode){
        painter.setBrush(QColor(33, 51, 107));
    }else{
        painter.setBrush(QColor(25, 127, 224));
    }
    painter.drawRoundedRect(rect, ballRadius, ballRadius); // 使用滚珠半径作为圆角半径

    // 绘制圆形滚珠
    qreal ballPosition = m_isAutoMode ? rect.width() - ballRadius * 2 : 0;
    QRectF ballRect(ballPosition + padding, padding, ballRadius * 2, ballRadius * 2);

    // 设置滚珠的渐变色
    qreal gradientCenterX = ballPosition + padding + ballRadius;
    qreal gradientCenterY = padding + ballRadius;
    QRadialGradient gradient(gradientCenterX, gradientCenterY, ballRadius);
    gradient.setColorAt(0, QColor(25, 127, 224));
    gradient.setColorAt(1, QColor(33, 51, 107));
    painter.setBrush(gradient);
    painter.drawEllipse(ballRect);

    // 绘制文本
    painter.setPen(Qt::white);
    QString text = m_isAutoMode ? "自动模式" : "手动模式";
    painter.drawText(rect, Qt::AlignCenter, text);
}