Qt模仿IOS滑动按钮

在上一篇文章里我介绍了在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的头文件

#ifndef SWITCHBUTTON_H
#define SWITCHBUTTON_H

#include <QWidget>
#include<QTimer>

class switchButton : public QWidget
{
    Q_OBJECT
public:
    explicit switchButton(QWidget *parent = 0);
    void writeSwitchButtonState(bool ison);
    bool readSwitchButtonState();
private:
    bool ison=false;
    float currentValue;
    float widthSize,heightSize;
    QTimer *timer;
    void paintEvent(QPaintEvent *event);//绘制事件
    void mousePressEvent(QMouseEvent *event);//点击事件
signals:

public slots:
private slots:
    void begainAnimation();
};

#endif // SWITCHBUTTON_H
2、switchButton的源文件

#include "switchbutton.h"
#include <QPaintEvent>
#include<QPainter>
#include<QRectF>
#include<QRect>
/**
 * @brief switchButton::switchButton
 * @param parent
 * 创建的这个switchbutton只是提供固定的大小,展示实现的过程。
 */

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

}
void switchButton::paintEvent(QPaintEvent *event){
    Q_UNUSED(event)
    QPainter painter(this);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setPen(Qt::NoPen);
    if(ison){
        painter.save();
        painter.setBrush(Qt::green);
        QRectF greenRect=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();
        QColor grayColor(199,199,199);
        painter.setBrush(grayColor);
        QRectF roundRect=QRectF(0,0,widthSize,heightSize);
        painter.drawRoundedRect(roundRect,0.5*heightSize,0.5*heightSize);
        painter.restore();
        painter.save();
        painter.setBrush(Qt::red);
        QRectF redRect=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();
    }
}
void switchButton::mousePressEvent(QMouseEvent *event){
    Q_UNUSED(event)
    ison=!ison;
    timer->start(10);
    this->update();
}
void switchButton::begainAnimation(){
    int i=0.05*heightSize;
    int n=widthSize-0.95*heightSize;
    if(ison){
        currentValue+=1;
        if(currentValue>n-i){
            timer->stop();
        }
    }else{
        currentValue-=1;
        if(currentValue<i){
            timer->stop();
        }
    }
    update();
}

void switchButton::writeSwitchButtonState(bool ison)
{
    this->ison=ison;
    this->update();
}
bool switchButton::readSwitchButtonState()
{
    return this->ison;
}
鉴于QTimer的复杂,本例里面没有对透明度进行动画过渡。


  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
Qt框架下模仿iOS语音波形图,可以使用Qt Multimedia模块和Qt Quick绘图功能来实现。 首先,我们需要使用Qt Multimedia模块录制音频,并获取音频的波形数据。通过QAudioInput类可以实现音频录制,并使用QAudioFormat设置音频格式。在录制过程中,可以通过QBuffer类收集音频数据,并使用QAudioBuffer将音频数据转换为波形数据。 接下来,我们可以将获取的波形数据显示在Qt Quick界面上的图形组件中。可以创建一个自定义的波形图形组件,继承自QQuickPaintedItem,并实现paint方法来绘制波形图形。在paint方法中,根据波形数据使用QPainter进行绘制,并根据音频的时间轴来确定波形的位置和形状。可以使用不同的颜色和样式来显示波形,以逼真地模仿iOS的语音波形图。 除了绘制波形图形,我们还可以为波形图形组件添加一些交互功能,例如拖动、缩放等。可以通过重写鼠标事件和触摸事件来实现这些功能,例如根据鼠标或手指的位置来确定当前选择的波形片段,并提供相应的操作。 最后,我们将自定义的波形图形组件嵌入到Qt Quick的界面中,通过QML语言进行布局和样式的调整。可以根据需要添加其他的界面元素,例如播放按钮、录制按钮等。 通过以上步骤,我们可以在Qt中实现一个模仿iOS语音波形图的界面。这样可以让用户在Qt应用程序中更加直观和便捷地查看和编辑音频波形数据。
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值