Qt模仿IOS滑动按钮效果

2023-07-18 11:35:03 77

在上一篇文章里我介绍了在Android中如何实现IOS形式的滑动按钮，在这篇文章中我将介绍如何用Qt实现IOS形式的滑动按钮。其实在Android中实现这个和在Qt中实现是一样的道理的，只是使用的工具有所不同罢了。在Qt里面我们使用的是C++，而Android中则是Java。语言并不是决定的因素，而实现的思路才是最终决定胜负的利器。

1）、在Android中的绘制主要是在OnDraw这个函数里面进行的，且可以在OnDraw外部写函数进行绘制，只需把Cavas传入即可。而在Qt里面的绘制主要是在painEvent里面进行的，且不能再外部写函数实现它的绘制。

2）、在Android中承担绘制的主要是Canvas这个对象，Painter主要是来进行画笔的定义和修改。而在Qt里面主要承担绘制任务的是Painter对象，它既要充当画笔的角色，还要做为画板来存在。

3）、在Android里面我们可以使用ValueAnimation来实现动画刷新，而在Qt里面并没用提供这样的一个函数，所以我们只能通过QTimer来主动刷新，具体代码在下方。

4）、在两份代码里面懂提供了外部接口来访问和读写它的状态。

代码如下

1、switchButton的头文件

#ifndefSWITCHBUTTON_H
#defineSWITCHBUTTON_H

#include
#include

classswitchButton:publicQWidget
{
Q_OBJECT
public:
explicitswitchButton(QWidget*parent=0);
voidwriteSwitchButtonState(boolison);
boolreadSwitchButtonState();
private:
boolison=false;
floatcurrentValue;
floatwidthSize,heightSize;
QTimer*timer;
voidpaintEvent(QPaintEvent*event);//绘制事件
voidmousePressEvent(QMouseEvent*event);//点击事件
signals:

publicslots:
privateslots:
voidbegainAnimation();
};

#endif//SWITCHBUTTON_H

2、switchButton的源文件

#include"switchbutton.h"
#include
#include
#include
#include
/**
*@briefswitchButton::switchButton
*@paramparent
*创建的这个switchbutton只是提供固定的大小，展示实现的过程。
*/

switchButton::switchButton(QWidget*parent):QWidget(parent)
{
setMaximumSize(200,130);
setMinimumSize(200,130);
widthSize=(float)width();
heightSize=(float)height();
timer=newQTimer(this);
timer->setInterval(50);
if(ison){
currentValue=widthSize-0.95*heightSize;
}else{
currentValue=0.05*heightSize;
}
connect(timer,SIGNAL(timeout()),this,SLOT(begainAnimation()));

}
voidswitchButton::paintEvent(QPaintEvent*event){
Q_UNUSED(event)
QPainterpainter(this);
painter.setRenderHint(QPainter::SmoothPixmapTransform);
painter.setRenderHint(QPainter::Antialiasing);
painter.setPen(Qt::NoPen);
if(ison){
painter.save();
painter.setBrush(Qt::green);
QRectFgreenRect=QRectF(0,0,widthSize,heightSize);
painter.drawRoundedRect(greenRect,0.5*heightSize,0.5*heightSize);
painter.restore();
painter.save();
painter.setBrush(Qt::white);
painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize);
painter.restore();
}else{
painter.save();
QColorgrayColor(199,199,199);
painter.setBrush(grayColor);
QRectFroundRect=QRectF(0,0,widthSize,heightSize);
painter.drawRoundedRect(roundRect,0.5*heightSize,0.5*heightSize);
painter.restore();
painter.save();
painter.setBrush(Qt::red);
QRectFredRect=QRectF(heightSize*0.05,heightSize*0.05,widthSize-heightSize*0.1,heightSize*0.9);
painter.drawRoundedRect(redRect,0.45*heightSize,0.45*heightSize);
painter.restore();
painter.save();
painter.setBrush(Qt::white);
painter.drawEllipse(currentValue,0.05*heightSize,0.9*heightSize,0.9*heightSize);
painter.restore();
}
}
voidswitchButton::mousePressEvent(QMouseEvent*event){
Q_UNUSED(event)
ison=!ison;
timer->start(10);
this->update();
}
voidswitchButton::begainAnimation(){
inti=0.05*heightSize;
intn=widthSize-0.95*heightSize;
if(ison){
currentValue+=1;
if(currentValue>n-i){
timer->stop();
}
}else{
currentValue-=1;
if(currentValuestop();
}
}
update();
}

voidswitchButton::writeSwitchButtonState(boolison)
{
this->ison=ison;
this->update();
}
boolswitchButton::readSwitchButtonState()
{
returnthis->ison;
}

鉴于QTimer的复杂，本例里面没有对透明度进行动画过渡。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

Qt模仿IOS滑动按钮效果

热门推荐

随机推荐