flutter开发仿抖音首页面上下滑动切换播放视频效果

深藏阁楼爱情的钟 2023-10-07 10:12 116阅读 0赞

题记
—— 执剑天涯，从你的点滴积累开始，所及之处，必精益求精，即是折腾每一天。

——-【视频教程 感兴趣的伙伴可以瞅瞅】

本小节讲述：
1 VideoPlayer 视频播放组件使用
2 VideoPlayerController 的使用分析
3 FutureBuilder 的使用分析
4 PageView构建上下滑动的整屏切换页面
5 TabBar 与 TabBarView 构建左右滑动切换的页面

在这里插入图片描述

1 首先我们来实现页面的主体部分

通过 TabBar 与 TabBarView 实现左右切换的页面

  1. import 'package:flutter/cupertino.dart';
  2. import 'package:flutter/material.dart';
  4. class MainFind3Page extends StatefulWidget {
  6.   @override
  7.   State<StatefulWidget> createState() {
  9.     return MainFindPage3State();
  10.   }
  11. }
  13. class MainFindPage3State extends State with SingleTickerProviderStateMixin {
  16.   List<String> tabTextList = ["关注", "推荐"];
  17.   List<Tab> tabWidgetList = [];
  18.   TabController tabController;
  20.   @override
  21.   void initState() {
  23.     super.initState();
  25.     for (var value in tabTextList) {
  27.       tabWidgetList.add(Tab(
  28.         text: "$value",
  29.       ));
  30.     }
  31.     tabController = new TabController(length: tabTextList.length, vsync: this);
  32.   }
  34.   @override
  35.   Widget build(BuildContext context) {
  37.     return buildRootBody();
  38.   }
  40.   Widget buildRootBody() {
  42.     return Scaffold(
  43.       body: Stack(
  44.         children: <Widget>[
  45.           Positioned(
  46.             left: 0,
  47.             right: 0,
  48.             top: 0,
  49.             bottom: 0,
  50.             child: Container(
  51.               color: Colors.black,
  52.             ),
  53.           ),
  54.           Positioned(
  55.             left: 0,
  56.             right: 0,
  57.             top: 0,
  58.             bottom: 0,
  59.             child: buildTableViewWidget(),
  60.           ),
  61.           Positioned(
  62.             left: 0,
  63.             right: 0,
  64.             bottom: 0,
  65.             top: 54,
  66.             child: buildTabBarWidget(),
  67.           ),
  68.         ],
  69.       ),
  70.     );
  71.   }
  72.   ///构建 TabBarView
  73.   buildTableViewWidget() {
  75.     return TabBarView(
  76.       controller: tabController,
  77.       children: tabTextList
  78.           .map((value) => Container(
  79.                 alignment: Alignment.center,
  80.                 child: Text("$value",style: TextStyle(color: Colors.white),),
  81.               ))
  82.           .toList(),
  83.     );
  84.   }
  85.   ///构建顶部标签部分
  86.   buildTabBarWidget() {
  88.     return Container(
  89.       ///对齐在顶部中间
  90.       alignment: Alignment.topCenter,
  91.       child: TabBar(
  92.         controller: tabController,
  93.         tabs: tabWidgetList,
  94.         ///指示器的颜色
  95.         indicatorColor: Colors.white,
  96.         ///指示器的高度
  97.         indicatorWeight: 2.0,
  98.         isScrollable: true,
  100.         ///指示器的宽度与文字对齐
  101.         indicatorSize: TabBarIndicatorSize.label,
  102.       ),
  103.     );
  104.   }
  105. }

在这里是通过 帧布局 将 TabBar 与 TabBarView 叠在一起的。
效果如下
在这里插入图片描述

2 通过 PageView 来实现上下整屏切换效果

文章《flutter跨平台开发一点一滴分析系列文章》中 1.3.3 有记录 PageView 的使用案例

我们将上述 【构建 TabBarView】 处代码替换，使用 PageView 来构建 上下整屏页面切换效果

  1. ///构建 TabBarView
  2.   buildTableViewWidget() {
  4.     return TabBarView(
  5.       controller: tabController,
  6.       children: tabTextList
  7.           .map((value) => buildTableViewItemWidget(value))
  8.           .toList(),
  9.     );
  10.   }
  11.    /// 用来创建上下滑动的页面
  12.   Widget buildTableViewItemWidget(String value) {
  15.     List<VideoModel> list =[];
  16.     if(value == "推荐"){
  18.       list= videoList;
  19.     }else{
  21.       list = videoList2;
  22.     }
  23.     return PageView.builder(
  24.       /// pageview中 子条目的个数
  25.       itemCount:list.length ,
  26.       /// 上下滑动
  27.         scrollDirection: Axis.vertical,
  28.         itemBuilder: (BuildContext context,int index){
  30.           VideoModel videoModel = list[index];
  31.       return buildPageViewItemWidget(value,videoModel);
  32.     });
  33.   }

这里面用到了 videoList 与 videoList2，保存的数据模型,是在 initState函数中初始化的

  1. ///推荐模拟数据
  2.   List <VideoModel> videoList =[];
  3.   ///关注模拟数据
  4.   List <VideoModel> videoList2 =[];
  6.   @override
  7.   void initState() {
  9.     super.initState();
  11.    ...
  13.     ///创建模拟数据
  15.     for (int i = 0; i < 10; i++) {
  17.       VideoModel videoModel = new VideoModel();
  18.       videoModel.videoName = "推荐测试数据$i";
  19.       videoModel.pariseCount = i * 22;
  20.       if (i % 3 == 0) {
  22.         videoModel.isAttention = true;
  23.         videoModel.isLike = true;
  24.       } else {
  26.         videoModel.isAttention = false;
  27.         videoModel.isLike = false;
  28.       }
  29.       videoModel.videoImag ="";
  30.       videoModel.videoUrl ="";
  31.       videoList.add(videoModel);
  32.     }
  34.     for (int i = 0; i < 3; i++) {
  36.       VideoModel videoModel = new VideoModel();
  37.       videoModel.videoName = "关注测试数据$i";
  38.       videoModel.pariseCount = i * 22;
  39.       videoModel.isAttention = true;
  40.       if (i % 3 == 0) {
  42.         videoModel.isLike = true;
  43.       } else {
  45.         videoModel.isLike = false;
  46.       }
  47.       videoModel.videoImag ="";
  48.       videoModel.videoUrl ="";
  49.       videoList2.add(videoModel);
  50.     }
  51.   }

对于 VideoModel 来讲，就是我们保存视频信息的数据模型了

  1. class VideoModel {
  3.   ///视频名称
  4.   String videoName ='';
  5.   ///视频链接
  6.   String videoUrl ='';
  7.   ///视频截图
  8.   String videoImag ='';
  9.   ///是否关注
  10.   bool isAttention =false;
  11.   ///关注的个数
  12.   num attentCount =0;
  13.   ///是否喜欢
  14.   bool isLike = false;
  15.   ///点赞的个数
  16.   num pariseCount = 0;
  17.   ///分享的次数
  18.   num shareCount=0;
  19. }

在上述代码中我们也使用到了 buildPageViewItemWidget 函数，如下

  1. buildPageViewItemWidget(String value, VideoModel videoModel) {
  3.     return FindVideoItemPage(value,videoModel);
  4.   }

在这里直接构建 的 FindVideoItemPage ，看如下 FindVideoItemPage 的定义

  1. ///播放视频的页面
  2. class FindVideoItemPage extends StatefulWidget {
  4.   String tabValue;
  5.   VideoModel videoModel;
  6.   FindVideoItemPage(this.tabValue, this.videoModel);
  8.   @override
  9.   State<StatefulWidget> createState() {
  11.     return FindVideoItemPageState();
  12.   }
  13. }
  15. class FindVideoItemPageState extends State<FindVideoItemPage> {
  17.   ///创建视频播放控制 器
  18.   VideoPlayerController videoPlayerController;
  19.   ///控制更新视频加载初始化完成状态更新
  20.   Future videoPlayFuture;
  22.   @override
  23.   void initState() {
  25.     super.initState();
  27.     videoPlayerController =
  28.         VideoPlayerController.network(widget.videoModel.videoUrl);
  30.     videoPlayFuture = videoPlayerController.initialize().then((_) {
  32.       ///视频初始完成后
  33.       ///调用播放
  34.       videoPlayerController.play();
  35.       setState(() {
  36.     });
  37.     });
  38.   }
  40.   @override
  41.   Widget build(BuildContext context) {
  43.     return Stack(
  44.       children: <Widget>[
  45.         ///播放视频
  46.         buildVideoWidget(),
  48.         ///控制播放视频按钮
  49.         buildControllWidget(),
  51.         ///底部区域的视频介绍
  52.         buildBottmFlagWidget(),
  54.         ///右侧的用户信息按钮区域
  55.         buildRightUserWidget(),
  56.       ],
  57.     );
  58.   }
  60.   @override
  61.   void dispose() {
  63.     super.dispose();
  64.     videoPlayerController.dispose();
  65.   }
  67. }

其实 FindVideoItemPage 就是我们 PageView 中构建的子视图了，我们可以看到 在 初始化函数 initState 中 创建了 VideoPlayerController，顾名思义 VideoPlayerController 是用来控制当前页面视频的播放的，在 dispose 中销毁 VideoPlayerController，这个也好理解，就是当前页面都释放掉了，播放的视频当然要停止播放了。

在这里这创建了一个 videoPlayFuture ，是用来监听 VideoPlayerController 初始化状态的，结合 FutureBuilder 来实时更新页面 State,如在方法 buildVideoWidget() 中

  1. ///播放视频
  2.   buildVideoWidget() {
  4.     return FutureBuilder(
  5.       future: videoPlayFuture,
  6.       builder: (BuildContext contex, value) {
  8.         if (value.connectionState == ConnectionState.done) {
  10.           ///点击事件
  11.           return InkWell(
  12.             onTap: () {
  14.               if (videoPlayerController.value.initialized) {
  16.                 /// 视频已初始化
  17.                 if (videoPlayerController.value.isPlaying) {
  19.                   /// 正播放 --- 暂停
  20.                   videoPlayerController.pause();
  21.                 } else {
  23.                   ///暂停 ----播放
  24.                   videoPlayerController.play();
  25.                 }
  27.                 setState(() {
  28.     });
  29.               } else {
  31.                 ///未初始化
  32.                 videoPlayerController.initialize().then((_) {
  34.                   videoPlayerController.play();
  35.                   setState(() {
  36.     });
  37.                 });
  38.               }
  39.             },
  41.             ///居中
  42.             child: Center(
  43.               /// AspectRatio 组件用来设定子组件宽高比
  44.               child: AspectRatio(
  45.                 ///设置视频的大小 宽高比。长宽比表示为宽高比。例如，16:9宽高比的值为16.0/9.0
  46.                 aspectRatio: videoPlayerController.value.aspectRatio,
  47.                 ///播放视频的组件
  48.                 child: VideoPlayer(videoPlayerController),
  49.               ),
  50.             ),
  51.           );
  52.         } else {
  54.           return Container(
  55.             alignment: Alignment.center,
  56.             ///圆形加载进度
  57.             child: CircularProgressIndicator(),
  58.           );
  59.         }
  60.       },
  61.     );
  62.   }

FutureBuilder会依赖一个Future,对于FutureBuilder来讲

  1. FutureBuilder({
  3.   this.future,
  4.   this.initialData,
  5.   @required this.builder,
  6. })

future ,FutureBuilder 中依赖的 Future ,通常是一个异步耗时任务,如这里的 videoPlayFuture 是指向 videoPlayerController 的初始化函数initialize()，这是一个异步的耗时操作,
builder ,Widget构建器,该构建器会在Future执行的不同阶段被多次调用，构建格式如下

  1. Function (BuildContext context, AsyncSnapshot snapshot)
  2.   /**
  3.    * snapshot会包含当前异步任务的状态信息及结果信息 ，
  4.    * 比如我们可以通过snapshot.connectionState获取异步任务的状态信息、
  5.    * 通过snapshot.hasError判断异步任务是否有错误等等
  6.    */

而通过 snapshot.connectionState 获取的 ConnectionState 状态有以下值：

  1. enum ConnectionState {
  3.   /// 当前没有异步任务，比如[FutureBuilder]的[future]为null时
  4.   none,
  5.   /// 异步任务处于等待状态
  6.   waiting,
  7.   /// Stream处于激活状态（流上已经有数据传递了），对于FutureBuilder没有该状态。
  8.   active,
  9.   /// 异步任务已经终止.
  10.   done,
  11. }
3 通过 VideoPlayer 播放视频

使用 VideoPlayer，我们首先需要添加依赖

  1. video_player: ^0.6.4

对于 VideoPlayer 来讲，它只接收一个 VideoPlayerController，我们可以通过 VideoPlayerController 来绑定要播放的视频地址

  1. ///网络链接
  2.     videoPlayerController = VideoPlayerController.network(widget.videoModel.videoUrl);
  3.     ///本地链接
  4.     VideoPlayerController videoPlayerController2 = VideoPlayerController.asset(widget.videoModel.videoUrl);
  5.     ///File形式的视频
  6.     VideoPlayerController videoPlayerController3 = VideoPlayerController.file(File(widget.videoModel.videoUrl));

当 绑定了播放的地址后，可以VideoPlayerController来预加载初始化播放器

  1. videoPlayerController.initialize().then((_) {
  3.       ///视频初始完成后
  4.       ///调用播放
  5.       videoPlayerController.play();
  6.       setState(() {
  7.     });
  8.     });

对于 initialize() 方法来讲，这是一个异步的耗时操作.

VideoPlayerValue 记录了当前视频播放的一些状态信息

  1. VideoPlayerValue videoPlayerValue = videoPlayerController.value;
  4. ///是否初始化完成
  5. bool initialized = videoPlayerValue.initialized;
  6. ///是否正在播放
  7. bool isPlaying = videoPlayerValue.isPlaying;
  8. ///当前播放的视频的宽高比例
  9. double aspectRatio = videoPlayerValue.aspectRatio;
  10. ///当前视频是否缓存 
  11. bool  isBuffer = videoPlayerValue.isBuffering;
  12. ///当前视频是否循环
  13. bool isLoop = videoPlayerValue.isLooping;
  14. ///当前播放视频的总时长
  15. Duration totalDuration = videoPlayerValue.duration;
  16. ///当前播放视频的位置 
  17. Duration currentDuration = videoPlayerValue.position;

在这里，我们通过 totalDuration 与 currentDuration 就可实现播放进度的进度条绘制。

完毕

发表评论

表情：
评论列表 （有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

    相关 vue+swiper仿抖音视频滑动

    解释一番，本文章只是做了一个仿抖音的滑动效果，并没有添加其他效果，例如头部的类似关注与推荐功能、广告、右侧按钮等等，这些功能可按项目需求添加，在这里我就不多bb了。 先看下

    迷南。迷南。/ 0 赞/ 396 阅读