基于QWidget实现一个简单的开关控件,左右动画效果切换,效果如下
样式在paintEvent中绘制
void RdSwitchButton::paintEvent(QPaintEvent *event)
{
QPainter painter(this);
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(Qt::gray);
painter.setBrush(m_normalColor);
painter.drawRect(this->rect());
painter.setPen(Qt::NoPen);
painter.setBrush(m_selectColor);
QRect selectRect;
selectRect = QRect(m_xVal, 0, this->width()/2, this->height());
painter.drawRect(selectRect);
painter.setPen(m_leftPenColor);
painter.drawText(QRect(0, 0, this->width()/2, this->height()), Qt::AlignCenter, m_leftText);
painter.setPen(m_rightPenColor);
painter.drawText(QRect(this->width()/2, 0, this->width()/2, this->height()), Qt::AlignCenter, m_rightText);
QWidget::paintEvent(event);
}
mouseReleaseEvent触发开关切换
void RdSwitchButton::mouseReleaseEvent(QMouseEvent *event)
{
QPoint curPos = event->pos();
bool bChecked = curPos.x() <= this->width()/2 ? false : true;
if(bChecked == m_bChecked)
return;
m_bChecked = bChecked;
m_xVal = bChecked == false ? this->width()/2 : 0;
m_pTimer->start();
QWidget::mouseReleaseEvent(event);
}
定时器实现动画效果
m_pTimer = new QTimer(this);
m_pTimer->setInterval(20);
connect(m_pTimer, &QTimer::timeout, this, &RdSwitchButton::onTimeout);
void RdSwitchButton::onTimeout()
{
if(!m_bChecked) {
m_xVal -= 6;
if(m_xVal <= 0) {
m_xVal = 0;
m_leftPenColor = Qt::white;
m_rightPenColor = Qt::black;
m_pTimer->stop();
QTimer::singleShot(10, this, [=]{
emit sigClick(m_bChecked);
});
}
}
else {
m_xVal += 6;
if(m_xVal >= this->width()/2) {
m_xVal = this->width()/2;
m_leftPenColor = Qt::black;
m_rightPenColor = Qt::white;
m_pTimer->stop();
QTimer::singleShot(10, this, [=]{
emit sigClick(m_bChecked);
});
}
}
update();
}
实现比较简单,简单记录一下
完整的代码下载