Qt实现网易云音乐进度条效果

Qt网易云音乐中的音乐进度条是一个小小的难关,今天在Android写记录步数进度条中突然想到了它。移动端和电脑端自定义写界面模块的方式大同小异,现在将其中的代码放出,供大家点评参阅。代码还是比较混乱,请各位大侠还是要多多包涵。

其中我把这个类打包出来,类的实现就是靠painevent来完成的。其中的两个自定义信号是为了快进快退而准备的,它们的实现不在本类中,大小位置也是在外部类中实现。其中的一些位置参数,大小参数属于本身创作需要,如有迷惑,还望海涵。

代码:

#ifndef DOWN_PROGRESSBARWIDGET_H
#define DOWN_PROGRESSBARWIDGET_H

#include <QWidget>
#include <QLabel>
#include <QPushButton>
#include <QPaintEvent>
#include <QPainter>
#include <QMouseEvent>
#include <QPalette>
#include <QTimer>

class down_progressbarWidget : public QWidget
{
  Q_OBJECT
public:
  QString s="0:0";
  QString t="0:0";
  explicit down_progressbarWidget(QWidget *parent = 0);
  void changPosition(qint64 xx);
private:
  int X=56;
  qint64 druntime;//总进度
  qint64 positontime;//当前进度
  QLabel *liftLabel;//左时间显示
  QLabel *rightLabel;//右边时间显示
  QTimer *timer3;//刷新
  void paintEvent(QPaintEvent* event);
  void mousePressEvent(QMouseEvent *event);
  void mouseMoveEvent(QMouseEvent *event);
signals:
  void changeX();//自定义一个信号
public slots:
  void updatepos();
};

#endif // DOWN_PROGRESSBARWIDGET_H

#include "down_progressbarwidget.h"

down_progressbarWidget::down_progressbarWidget(QWidget *parent) : QWidget(parent)
{
  QPalette pal;
  pal.setColor(QPalette::WindowText,QColor(255,255,255));
  QFont font("Courier",10);
  liftLabel=new QLabel(this);
  rightLabel=new QLabel(this);
  liftLabel->setAlignment(Qt::AlignCenter);
  rightLabel->setAlignment(Qt::AlignCenter);
  liftLabel->setGeometry(0,10,50,50);
  rightLabel->setGeometry(640,10,50,50);
  rightLabel->setFont(font);
  liftLabel->setFont(font);
  liftLabel->setPalette(pal);
  rightLabel->setPalette(pal);
  timer3=new QTimer(this);
  timer3->setInterval(1000);
  connect(timer3,SIGNAL(timeout()),this,SLOT(updatepos()));
}
void down_progressbarWidget::paintEvent(QPaintEvent *event)
{
  Q_UNUSED(event);
  QPainter painter(this);
  painter.setRenderHint(QPainter::SmoothPixmapTransform);
  painter.setRenderHint(QPainter::Antialiasing);
  QColor baseColor(0,20,20);
  QColor inColor(255,0,0);
  QColor outColor(255,255,255);
  painter.save();
  painter.setPen(Qt::NoPen);
  painter.setBrush(baseColor);
  QRectF rect=QRectF(55,32,580,6);
  painter.drawRoundedRect(rect,3,3);
  painter.restore();
  painter.save();
  painter.setPen(Qt::NoPen);
  painter.setBrush(inColor);
  QRectF playrect=QRectF(55,32,X-63,6);
  painter.drawRoundedRect(playrect,3,3);
  painter.restore();
  painter.setPen(Qt::NoPen);
  painter.setBrush(outColor);
  painter.drawEllipse(X-7,25,20,20);
  painter.restore();
  painter.save();
  painter.setPen(Qt::NoPen);
  painter.setBrush(inColor);
  painter.drawEllipse(X,32,6,6);
  painter.restore();
}
void down_progressbarWidget::mousePressEvent(QMouseEvent *event)
{
  if(event->pos().y()>30&&event->pos().y()<50)
  {
      int value;
      value=event->pos().x();
      if(value<55)
      {
        X=56;
      }
      else if(value>635)
      {
        X=620;
      }
      else
      {
        X=value;
      }
      if(X<=620)
      {
        emit changeX();
      }
      update();
      setCursor(Qt::PointingHandCursor);
  }
  else
  {
    event->ignore();
  }
}
void down_progressbarWidget::mouseMoveEvent(QMouseEvent *event)//可以进行拖动
{
    int value;
    value=event->pos().x();
    if(value<55)
    {
      X=56;
    }
    else if(value>635)
    {
      X=620;
    }
    else
    {
      X=event->pos().x();
    }

    emit changeX();//自定义了一个信号
    update();
    setCursor(Qt::PointingHandCursor);
}
/*
 * 外部使用一个定时器每隔1秒触发这个程序进行更新
*/
void down_progressbarWidget::updatepos()//显示歌曲时间进度
{
  float a;
  a=(float)positontime/(float)druntime;
  X=a*580+56;
  qint64 time=druntime;
  double secondDouble=time/1000;
  int minint=secondDouble/60;
  int secondint=secondDouble-minint*60;
  double secondtime1=positontime/1000;
  int minint1=secondtime1/60;
  int secondint1=secondtime1-minint1*60;
  t=QString("%0:%1").arg(QString::number(minint1),QString::number(secondint1));
  s=QString("%0:%1").arg(QString::number(minint),QString::number(secondint));
  rightLabel->setText(s);
  liftLabel->setText(t);
  update();
}
void down_progressbarWidget::changPosition(qint64 xx)//外部写入当前时间
{
  this->positontime=xx;
}

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

(0)

相关推荐

  • Qt自定义控件实现圆圈加载进度条

    本文实例为大家分享了Qt实现圆圈加载进度条的具体代码,供大家参考,具体内容如下 先看效果图: 思路:画一个占270度的圆弧,然后定义一个定时器,定时旋转坐标系,实现旋转的效果.圆弧需要使用渐变色,实现颜色越来越浅的效果 关键代码:CMProcessBar1.cpp CMProcessBar1::CMProcessBar1(QWidget *parent) : QWidget(parent), ui(new Ui::CMProcessBar1) { ui->setupUi(this); QTime

  • Qt自定义控件实现圆盘进度条

    本文实例为大家分享了Qt圆盘进度条的具体代码,供大家参考,具体内容如下 自定义控件二:圆盘进度条 上效果图: 主要思路:使用qpainter根据图形需求 画圆和圆弧,画指针(多边形,指定坐标即可),根据具体的value值旋转坐标系,使指针达到旋转效果,旋转度数是根据value值,总共360度,占比求得.最中间需要画文字上去,每次更新value时调用update()方法,重绘界面. 主要代码:CMPassrate1.cpp void CMPassrate1::paintEvent(QPaintEv

  • Qt实现网易云音乐进度条效果

    Qt网易云音乐中的音乐进度条是一个小小的难关,今天在Android写记录步数进度条中突然想到了它.移动端和电脑端自定义写界面模块的方式大同小异,现在将其中的代码放出,供大家点评参阅.代码还是比较混乱,请各位大侠还是要多多包涵. 其中我把这个类打包出来,类的实现就是靠painevent来完成的.其中的两个自定义信号是为了快进快退而准备的,它们的实现不在本类中,大小位置也是在外部类中实现.其中的一些位置参数,大小参数属于本身创作需要,如有迷惑,还望海涵. 代码: #ifndef DOWN_PROGR

  • 漂亮的Android音乐歌词控件 仿网易云音乐滑动效果

    前言: 项目有个音乐播发器功能,实现音乐在线播放,同时需要带有歌词显示功能.网上也找过,在github找到勉强能用的控件,只是效果还是差强人意,不是特别好.于是趁有空的时间,参考了网上的部分demo,自己也写了个歌词控件. 只要demo可以拉到最底部. 一.歌词控件效果. 目前的歌词控件效果如下: 主要效果有以下: 1.实现自动滑动切换到下一句. 2.实现滑动歌词切换播放时间. 3.实现拖动歌词时仿网易云音乐显示时间线,将要选择的歌词颜色变化. 4.音乐进度跳转时,歌词跳转可以滑动切换. 二.歌

  • Android控件RecyclerView实现混排效果仿网易云音乐

    前言 最近在使用网易云音乐的时候,看到如下图的排版效果图,自己也想实现一个 这里采用网上用法最多的方式,而且是比较简单的方式实现的,想要做项目的同学也可以快速入手搞定首页界面,可以在最快的时间内模仿出来,且效果达到90%以上的相似 效果演示 至于图片的加载你们可以根据网上的Api获取相应的图片加载到对应的位置,这里只是采用本地图片来演示 实现分析 这里是采用RecyclerView的GridLayoutManager的一个SpanSize这么一个东西,从下图很容易知道其意思 项目结构 项目结构可

  • android实现音乐播放器进度条效果

    本文实例为大家分享了android实现音乐播放器进度条效果的具体代码,供大家参考,具体内容如下 效果图 依赖3个对象 MediaPlayer:实现音乐播放,暂停,缓冲. SeekBar:滑动的进度条. java.util.Timer:定时器,时时更新进度条. main.xml样式文件 <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android

  • Qt实现炫酷启动图动态进度条效果

    目录 一.简述 二.动效进度条 1.光效进度条 2.延迟到达进度条 3.接口说明 三.启动图 1.实现思路 2.背景图切换 四.测试 1.构造启动图 2.背景图 3.其他信息 4.事件循环 五.源码 一.简述 最近接到一个新需求,让做一个动效进度条. 由于我们的产品比较大,在软件启动的时候会消耗比较长的时间,原生的进度条已经不能满足我们的需求,这里我们就需要一个会动的进度条,效果如下图所示. 光效进度条主要是做了一个进度动画,在已完成的部分上进行快速的迭代渲染,给用户一种直观感受,我们的软件一直

  • React模仿网易云音乐实现一个音乐项目详解流程

    目录 一.项目功能说明 二.最终效果 三.文件目录结构说明 四.项目技术栈 五.核心技术 六.遇到的问题 七.github链接 一.项目功能说明 暂停.播放歌曲 切换上一首.下一首歌曲 拖动进度条改变播放进度 随机播放.循环播放.单曲循环 实时展示歌词 切换不同分类的歌单.歌手.电台 实现推荐.排行榜.歌单.主播电台.歌手.新碟上架板块的展示 二.最终效果 首页: 排行榜: 歌单: 主播电台: 歌手: 新碟上架: 三.文件目录结构说明 assets:存放共用的css.font图标.image c

  • 微信小程序实战之网易云音乐歌曲详情页实现代码

    这里记录一下做网易云小程序的音乐播放详情页面的代码. 音乐播放界面的主要的重点有几个: 1.磁盘和摇杆的旋转效果,这里运用了css的动画属性 2.音乐播放和暂停,下一首/上一首等播放效果的实现 3.进度条的样式和控制 4.和上一页音乐推荐列表页通信,利用订阅与发布Pubsub HTML代码及要点 <!--pages/songDetail/songDetail.wxml--> <view class="songDetailContainer"> <view

  • vue仿网易云音乐播放器界面的简单实现过程

    由于工作项目的需要,需要使用到歌曲播放,参考多方资料,写了一个仿网易云音乐播放界面,能完整的实现音乐播放功能. 前端简单的使用vue组件和audio标签实现了播放器界面,后端则是调用网易云的API获取对应的歌曲信息.  废话不多说上代码 歌曲播放界面(musicPlay.vue) <template> <div class="main-page"> <audio :src="songInfo.url" id="music&qu

  • Python爬取网易云音乐热门评论

    最近在研究文本挖掘相关的内容,所谓巧妇难为无米之炊,要想进行文本分析,首先得到有文本吧.获取文本的方式有很多,比如从网上下载现成的文本文档,或者通过第三方提供的API进行获取数据.但是有的时候我们想要的数据并不能直接获取,因为并不提供直接的下载渠道或者API供我们获取数据.那么这个时候该怎么办呢?有一种比较好的办法是通过网络爬虫,即编写计算机程序伪装成用户去获得想要的数据.利用计算机的高效,我们可以轻松快速地获取数据. 那么该如何写一个爬虫呢?有很多种语言都可以写爬虫,比如Java,php,py

  • Javascript+CSS3实现进度条效果

    进度条在很多web中都能用的到,本文就是介绍了进度条效果,具体代码如下: 一:css2 属性clip实现网页进度条: 在实现之前,我们先来介绍一下clip属性,因为这个属性在css2.1中很少使用到,所以我们有必要来了解一下: 浏览器支持程度:所有主流浏览器都支持 clip 属性. Clip属性在w3c官网是这样描述的:通过对元素进行裁剪来控制元素的可视区域,默认情况下 元素是不进行任何裁剪的. Clip裁剪的语法如下: .xx {clip:rect(<top>, <right>,

随机推荐