文章目录
自绘按钮实现
概要
- 当我们需要一个开关样式的
QPushbutton
,没有图片的话,我们可以采用自绘的形式实现。 - 且使用
QtDesinger
中提升为Promote to的功能加入界面中,而不是使用代码的方式。
效果图
代码
- 代码相对简单,主要看一下绘制的实现
cpp
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);
}
'提升为'用法
介绍
- 在Qt设计器中,它允许用户将一个标准Qt Widget转换为自定义的QWidget子类。这样,用户可以在设计器中使用自己的控件,同时还能在代码中添加额外的功能或属性。
步骤
- 随便拖入一个按钮到设计器中
- 右键它,找到'提升为'选项
- 填入已经实现的类,点击添加,添加完成后就可以选择提升
总结
- 知识理应共享,源码在此
- 提升为用起来还是很方便的,可以大大减少代码量以及提高阅读效率