Flutter 小知识:ListView播放视频列表(二)

一生中，我们要经历许多事情，要相识相交许多人，而心灵像一个筛子，在世事颠沛流离中，慢慢的一些人就漏掉了。不过，对于智者来说，他们漏掉的只是别人的过错与不足，他们不会刻意去记恨一个人，而会记住他人的好和善，并时时充盈自己那颗感恩的心。宽容、大气的生活会让我们更容易感受到喜乐与安然。

上一章:Flutter 小知识:ListView播放视频列表(一)中给大家讲了ListView视频播放的一些常用技巧,这一章继续吧ListView视频播放优化一下.实现ListView视频播放可滑动进度条播放,进度条可跟随视频滑动等操作.

先来看看今天要完成的效果:

效果图(1.1):

分析:

• 添加进度条开始结束文字
• 添加滑动进度条
• 点击开始按钮进度条隐藏掉
• 进度条跟随视频播放而播放
• 控制进度条也可以控制视频播放.

添加进度条

进度条布局:

 Stack(
      children: [
        //占满全屏 并 播放视频
        Positioned.fill(...),

        //编辑透明文字
        buildText(),

        //编辑滑动条
        Positioned(
          bottom: 2,
          right: 10,
          left: 10,
          child:  buildSilder(),
        ),
      ],
    );

Slider进度条组件:

 //当前播放视频进度条进度
  double _slidervalue = 0.0;

  //滑动进度条
  Widget buildSilder() {
    return Row(
      children: [
      //开始文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
        Expanded(
          child: Slider(
            //分段提示 配合divisions使用
            label: "$_slidervalue _slidervalue",

            ///将视频分为5段 只能滑动到5段上的某个位置
            divisions: 5,

            ///已滑动过得颜色
            activeColor: Colors.red,

            ///未滑动的颜色
            inactiveColor: Colors.cyan,

            ///默认为0.0。必须小于或等于[最大值]
            ///如果[max]等于[min]，则滑块被禁用。
            min:  0,

            ///默认为1.0。必须大于或等于[min]。
            ///如果[max]等于[min]，则滑块被禁用。
            max: 1,

            ///当前进度 取值(0 - 1)
            value: _slidervalue,

            //进度条进度 返回值为(0-1)
            onChanged: (double value) {
              setState(() {
                _slidervalue = value;
              });
            },
            //滑动开始回调
            onChangeStart: (double value){
              Toast.toast(context,msg: "滑动开始$value");
            },
            //滑动结束回调
            onChangeEnd: (double value){
              Toast.toast(context,msg: "滑动结束$value");
            },
          ),
        ),
        //结束文字
        Text(
          "0.0",
          style: TextStyle(fontSize: 14, color: Colors.white),
        ),
      ],
    );
  }

分析:

• 通过Row()组件左右排列子Widet
• 最左边是当前滑动的时间
• 最右边是总时间
• 中间通过Expanded组件占满填充了Slider滑动组件

这段代码还是很简单,都有加注释,就不一一介绍了,有不懂的记得在评论区留言哦~

效果图(1.2)

设置进度文字

//滑动进度条
  Widget buildSilder() {
    return Row(
      children: [
        //开始进度
        Text( buildTextString(_controller.value.position),),
        //进度条
        ....
        //总进度
        Text( buildTextString(_controller.value.duration),),
      ],
    );
  }

String buildTextString(Duration duration) {
    // 返回此持续时间跨越的整秒数。
    int inSeconds = duration?.inSeconds;
    // 返回此持续时间跨越的整分钟数。
    int inMinutes = duration?.inMinutes;

    String time = "";
    try{
      time = "$inMinutes.${inSeconds % 60}";
    }catch(e){
      LogUtil.Log(tagging: "catchLogUtil",title: e.toString());
    }
    return time;
  }

• duration?.inSeconds 当duration!=null时inSeconds 整秒数
• duration?.inMinutes当duration!=null时inMinutes整分数

简单解释一下这里:

• inSeconds是分

• inMinutes是秒

咋们要显示的是分.秒

如果当前秒 < 60的话,inMinutes % 60 会报一个异常,所以这里要用try{}catch(e){}包裹一下.

秒 > 60 的话就让他 % 60

点击进度条控制视频进度

在Slider的进度返回值中监听:

	    onChanged: (double value) {
              setState(() {
                _slidervalue = value;
                //拖动进度条改变视频长度
                _controller.seekTo(_controller.value.duration * value);
              });
            }

• _controller.value.duration 视频总进度
• value返回为(0-1)的进度

通过 _controller.seekTo(_controller.value.duration * value);控制视频播放进度.

效果图(1.3):

视频播放进度条跟随变化

通过视频播放控制器对视频监听

 @override
  void initState() {
    super.initState();
	_controller.addListener(() {
       setState(() {
	        //使进度条跟随视频的变化而变化  当前进度 = 当前播放视频 / 总视频长度
	        _slidervalue = _controller.value.position.inMilliseconds /
	            _controller.value.duration.inMilliseconds;
	      });
	    });
}

• _controller.value.position.inMilliseconds视频播放当前进度时长毫秒
• _controller.value.duration.inMilliseconds视频播放总时长毫秒

视频播放完成重新播放

对文字监听,如果当前位置 = 总位置,让他回到起始地方

GestureDetector(
		chlid :Text("开始"),
          onTap:(){
           //视频当前进度
		      Duration position = _controller.value.position;
		      //视频总长度
		      Duration duration = _controller.value.duration;
		      //当播放完成之后,返回到初始位置
		      if (position == duration) {
		        _controller.seekTo(Duration.zero);
		      }
          }

效果图(1.4):

完整项目

完整代码

上一章:Flutter 小知识:ListView播放视频列表(一)

下一章:Flutter ListView播放视频列表(三)

原创不易,您的点赞就是对我最大的支持,留下您的点赞吧~

下面是我的公众号,平时会发一些andorid和 flutter 的小知识等,主要用来记录工作开发中的一些小知识,有喜欢的朋友可以扫描二维码咋们互相进步~