【flutter列表播放器】

视频播放器类
在这里插入图片描述

import 'package:jade/configs/PathConfig.dart';
import 'package:jade/utils/Utils.dart';
import 'package:model/user_share/reward_pool_model.dart';
import 'package:pages/user_share/view/user_share_article_detail_page.dart';
import 'package:util/navigator_util.dart';
import 'package:util/provider_util.dart';
import 'package:connectivity/connectivity.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:video_player/video_player.dart';
import 'package:visibility_detector/visibility_detector.dart';class VideoWidgetUserShare extends StatefulWidget {final String url;bool play;final String articleId;final Function callback;final int joinType;final int wantHaveType;final double pauseAspectRadio;final String coverUrl;VideoWidgetUserShare({Key key,@required this.url,@required this.play,@required this.articleId,@required this.callback,@required this.joinType,@required this.wantHaveType,this.pauseAspectRadio,this.coverUrl}) : super(key: key);@override_VideoWidgetUserShareState createState() => _VideoWidgetUserShareState();
}class _VideoWidgetUserShareState extends State<VideoWidgetUserShare> {VideoPlayerController _controller;Future<void> _initializeVideoPlayerFuture;double aspectRadio = 16.0 / 9.0;ConnectivityResult _connectivityResult;var _isVisible = true;double _sizeWidth = 16.0;double _sizeHeight = 9.0;@overridevoid initState() {super.initState();}@overridevoid didChangeDependencies() {// TODO: implement didChangeDependenciessuper.didChangeDependencies();}@overridevoid didUpdateWidget(VideoWidgetUserShare oldWidget) {super.didUpdateWidget(oldWidget);_connectivityResult = providerOf<RewardPoolModel>().connectivityResult;/*if (oldWidget.play != widget.play) {if (widget.play && _connectivityResult == ConnectivityResult.wifi) {_controller.play();} else {_controller.pause();}}*/if (oldWidget.play != widget.play) {if (widget.play && _connectivityResult == ConnectivityResult.wifi && _isVisible == true) {print('=播放器初始化并播放===');_init();} else {print('=播放器销毁释放===');_onDestroy();}}}@overridevoid dispose() {_onDestroy();super.dispose();}@overrideWidget build(BuildContext context) {return widget.play && _controller != null? _videoPlayerView(): _coverImageView();}//初始化播放器控制器_init(){print('视频播放器初始化==========');if(mounted){_controller = VideoPlayerController.network(widget.url,);_controller.setVolume(0);_initializeVideoPlayerFuture = _controller.initialize().then((_) {if (_controller.value.size.width < _controller.value.size.height) {//宽度小于高度： 竖屏视频_sizeWidth = 9.0;_sizeHeight = 16.0;}else{//宽度大于高度： 横屏视频_sizeWidth = 16.0;_sizeHeight = 9.0;}_controller.setLooping(true);});/*_controller.addListener(() {print('position:${_controller.value.position}');});*/_connectivityResult = providerOf<RewardPoolModel>().connectivityResult;if (widget.play && _connectivityResult == ConnectivityResult.wifi) {_controller.play();}}}//销毁播放器控制器_onDestroy(){if(_controller != null){_controller.dispose();_controller = null;}}//视频播放器布局_videoPlayerView(){return VisibilityDetector(key: Key(widget.url),onVisibilityChanged: (visibilityInfo){_isVisible = visibilityInfo.visibleFraction > 0;print('视频播放器小部件是否可见====$_isVisible');if(_isVisible == false){widget.play = false;_onDestroy();}//  setState(() {});},child: FutureBuilder(future: _initializeVideoPlayerFuture,builder: (context, snapshot) {return snapshot.connectionState == ConnectionState.done? Stack(children: [Center(child: GestureDetector(onTap: () {setState(() {if(_controller != null){_controller.pause();}});},child:/*ClipRRect(borderRadius: BorderRadius.circular(2),child: AspectRatio(aspectRatio: _controller.value.aspectRatio,child: VideoPlayer(_controller)))*/SizedBox.expand(child: FittedBox(fit: BoxFit.cover,child: SizedBox(width: _sizeWidth,height: _sizeHeight,child: VideoPlayer(_controller)),))),),Center(child: Offstage(offstage: _controller.value.isPlaying,child: Image.asset(PathConfig.iconPause,width: 40,height: 40,),),),],): _loadingView();},));}//显示封面图布局_coverImageView(){return Stack(alignment: Alignment.center,children: [widget.coverUrl != null ?SizedBox(width: double.infinity,height: double.infinity,child: Utils().roundedImage(widget.coverUrl, 5,fit: BoxFit.cover)) : SizedBox(width: double.infinity,height: double.infinity),Image.asset(PathConfig.iconPause,width: 40,height: 40,)],);}//视频播放器初始化，加载中封面_loadingView(){return Stack(alignment: Alignment.center,children: [widget.coverUrl != null ?SizedBox(width: double.infinity,height: double.infinity,child: Utils().roundedImage(widget.coverUrl, 5,fit: BoxFit.cover)) : SizedBox(width: double.infinity,height: double.infinity),CircularProgressIndicator(valueColor: AlwaysStoppedAnimation<Color>(Colors.white),strokeWidth: 2,)],);}}

列表ItemView中视频部分用InViewNotifierWidget包裹

Container(child: InViewNotifierWidget(id: '$index',builder: (BuildContext context, bool isInView,Widget child) {return ClipRRect(borderRadius: BorderRadius.circular(5),child: Container(width: Utils().screenWidth(context),height: Utils().screenWidth(context) * 0.5625,decoration: BoxDecoration(color: Colors.black,borderRadius: BorderRadius.circular(5)),child: VideoWidgetUserShare(key: ValueKey(videoUrl),play: isInView,url: videoUrl,coverUrl: coverUrl,callback: (value) {}),));},),)

列表使用InViewNotifierList

ScrollController _scrollController = ScrollController();
void initState() {
_scrollController.addListener(() {double pixels = _scrollController.position.pixels;//以前版本中用来上滑时隐藏tabBar导航栏的/*if (pixels >= _prePixels) {_prePixels = pixels;providerOf<MainModel>().setTabBarHeight(tabBarHeight - pixels);} else {providerOf<MainModel>().setTabBarHeight(tabBarHeight);}*/if (pixels == _scrollController.position.maxScrollExtent) {_doLoadMore();}});
}InViewNotifierList(physics: const AlwaysScrollableScrollPhysics(),padding: EdgeInsets.all(0),scrollDirection: Axis.vertical,initialInViewIds: ['0'],isInViewPortCondition: (double deltaTop, double deltaBottom,double viewPortDimension) {return deltaTop < (0.5 * viewPortDimension) &&deltaBottom > (0.5 * viewPortDimension);},itemCount: articleList.length + 2,builder: (BuildContext listContext, int index) {if (index == 0) {if(_bannerList.isNotEmpty){return BannerWidget(bannerList: _bannerList,swiperController: swiperController,);}else{return Container();}} else if (index == articleList.length + 1) {if (articleList.isEmpty) {return Container(margin: EdgeInsets.only(top: 75),child: Image.asset(S.current.l31),);}return _buildLoadMore();} else {return _buildContentItem(listContext,articleList[index - 1], index - 1);}},controller: _scrollController,)

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.xdnf.cn/news/515.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

Ubuntu Linux

Ubuntu Linux

起源与背景 Ubuntu起源于南非&#xff0c;其名称“Ubuntu”来源于非洲南部祖鲁语或豪萨语&#xff0c;意为“人性”、“我的存在是因为大家的存在”&#xff0c;这体现了非洲传统的一种价值观。Ubuntu由南非计算机科学家马克沙特尔沃斯&#xff08;Mark Shuttleworth&#xff…
阅读更多...
ctfshow web入门文件上传总结

ctfshow web入门文件上传总结

1.web151 前端验证 前端验证&#xff0c;修改html代码&#xff0c;上传还有一句话木马的php文件,之后用蚁剑连接即可找到flag <?php eval($_POST[1])?>2.web152 后端验证&#xff0c;修改mime类型(content-type) burp抓包&#xff0c;修改content-type为image/png …
阅读更多...
18.04Ubuntu网络一直connecting的问题

18.04Ubuntu网络一直connecting的问题

有段时间没登VMware的Ubuntu了&#xff0c;就知道这个Ubuntu一登必有问题。 如果你的网络一直connecting 设置成桥接模式就可以了&#xff01;
阅读更多...
用Python设置、更新和获取Excel单元格的值

用Python设置、更新和获取Excel单元格的值

Excel工作簿作为一款广泛使用的数据管理工具&#xff0c;与Python相结合&#xff0c;可以使得自动化处理大量数据成为可能。通过Python来设置、更新以及读取Excel单元格的值&#xff0c;不仅可以极大地提高工作效率&#xff0c;减少重复劳动&#xff0c;还能增强数据处理流程的…
阅读更多...
从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）

从零开始的 vue项目部署到服务器详细步骤（vue项目build打包+nginx部署+配置ssl证书）

从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09; 文章目录 从零开始的 vue项目部署到服务器详细步骤&#xff08;vue项目build打包nginx部署配置ssl证书&#xff09;一、前言二、vue项目部署前配置1、vite.config.js 增加…
阅读更多...
HarmonyOS 私仓搭建

HarmonyOS 私仓搭建

1. HarmonyOS 私仓搭建 私仓搭建文档&#xff1a;https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-ohpm-repo-quickstart-V5   发布共享包[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/ide-har-publish-0000001597973129-V5]…
阅读更多...
三项智能网联汽车强制性国家标准正式发布（附图解）

三项智能网联汽车强制性国家标准正式发布（附图解）

近日&#xff0c;工业和信息化部组织制定的GB 44495—2024《汽车整车信息安全技术要求》、GB 44496—2024《汽车软件升级通用技术要求》和GB 44497—2024《智能网联汽车 自动驾驶数据记录系统》三项强制性国家标准由国家市场监督管理总局、国家标准化管理委员会批准发布&#x…
阅读更多...
达梦检查工具dmdbchk的性能

达梦检查工具dmdbchk的性能

摘要&#xff1a; 本文介绍了dmdbchk的基础使用&#xff0c;例如检查信号量&#xff0c;其性能大约是10GB/分钟&#xff0c;新版本的会更快。 当数据库出问题时&#xff0c;可能会考虑用dmdbchk工具检查数据文件和库内部是否出现异常。对于450G的库会耗时多久&#xff1f; 答&…
阅读更多...
transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

transformControls THREE.Object3D.add: object not an instance of THREE.Object3D.

把scene.add(transformControls);改为scene.add(transformControls.getHelper());
阅读更多...
思科--交换网络综合实验

思科--交换网络综合实验

前言 之前一直在学华为ENSP的命令&#xff0c;最近来了个实验&#xff08;被坑了&#xff09;&#xff0c;要求是用思科完成。没法子&#xff0c;就弄呗 拓扑图 实验目标 首先配置以太通道&#xff08;逻辑上的&#xff09;实现链路冗余和负载共享 在交换机接口配置trunk&#…
阅读更多...
YOLOv11模型架构以及使用命令介绍

YOLOv11模型架构以及使用命令介绍

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能、AIGC、python、计算机视觉相关分享研究。 &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐------》 一、AI应用软件开发实战专栏【链接】 项目名称项目名称1.【人脸识别与管理系统开发…
阅读更多...
使用 PyCharm 构建 FastAPI 项目：零基础入门 Web API 开发

使用 PyCharm 构建 FastAPI 项目：零基础入门 Web API 开发

使用 PyCharm 构建 FastAPI 项目&#xff1a;零基础入门 Web API 开发 本文提供了一份完整的 FastAPI 入门指南&#xff0c;涵盖从环境搭建、依赖安装到创建并运行一个简单的 FastAPI 应用的各个步骤。通过 FastAPI 和 Uvicorn&#xff0c;开发者可以快速构建现代化的 Web API…
阅读更多...
正向解析和反向解析

正向解析和反向解析

正向解析 服务端&#xff1a; [rootlocalhost rhel]# vim /etc/named.conf [rootlocalhost named]# vim /var/named/named.openlab.com 客户端&#xff1a; [rootlocalhost rhel]# nslookup 反向解析 服务端&#xff1a; [rootlocalhost rhel]# vim /etc/named.conf [ro…
阅读更多...
openGauss数据库-头歌实验1-3 创建和管理模式

openGauss数据库-头歌实验1-3 创建和管理模式

一、创建和使用模式 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;基于 openGauss 学习创建模式的相关知识。 &#xff08;二&#xff09;相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.openGauss 的常用操作&#xff0c;2.SQL 创建模式相关语…
阅读更多...
鸿蒙进阶篇-Scroll、Tabs、Badge

鸿蒙进阶篇-Scroll、Tabs、Badge

“在科技的浪潮中&#xff0c;鸿蒙操作系统宛如一颗璀璨的新星&#xff0c;引领着创新的方向。作为鸿蒙开天组&#xff0c;今天我们将一同踏上鸿蒙基础的探索之旅&#xff0c;为您揭开这一神奇系统的神秘面纱。” 各位小伙伴们我们又见面了,我就是鸿蒙开天组,下面让我们进入今…
阅读更多...
多厂商的实现不同vlan间通信

多厂商的实现不同vlan间通信

Cisco单臂路由 Cisco路由器配置 -交换机配置 -pc配置 华三的单臂路由 -路由器配置 -华三的接口默认是打开的 -pc配置及ping的结果 -注意不要忘记配置默认网关 Cisco-SVI -交换机的配置 -创建vlan -> 设置物理接口对应的Acess或Trunk -> 进入vlan接口&#xff0c;打开接…
阅读更多...
Golang--函数、包、defer、系统函数、内置函数

Golang--函数、包、defer、系统函数、内置函数

1、何为函数 函数作用&#xff1a;提高代码的复用型&#xff0c;减少代码的冗余&#xff0c;提高代码的维护性 函数定义&#xff1a;为完成某一功能的程序指令(语句)的集合,称为函数。 语法&#xff1a; func 函数名(形参列表)(返回值类型列表){ //执行语句 //…… return …
阅读更多...
2024/11/3周报

2024/11/3周报

文章目录 摘要AbstractA2/O反应原理与详细流程一、反应原理二、工艺流程三、反应控制与优化模拟数据 文献阅读标题研究背景与重要性模型构建与方法论模型各部分的功能 数据收集与预处理模型训练与实验实验结果与分析模型的创新与贡献实际应用价值与未来发展方向结论 摘要 本周…
阅读更多...
一文搞定分治算法

一文搞定分治算法

分治 基础入门 搜索策略 基于分治实现二分查找 构建二叉树问题 汉诺塔问题 相关题解&#xff1a; leetcode226.翻转二叉树 法一&#xff1a;递归 leetcode101.对称二叉树 法一&#xff1a;递归 法二&#xff1a;迭代 leetcode50. Pow(x, n) 法一&#xff1a;快速幂…
阅读更多...
angular使用http实现get和post请求

angular使用http实现get和post请求

说明&#xff1a; angular使用http实现get和post请求 提示&#xff1a;在运行本项目前&#xff0c;请先导入路由router&#xff0c;可以参考我上一篇文章。 效果图&#xff1a; step1:E:\projectgood\ajsix\untitled4\package.json “angular/cdk”: “^18.2.10”, “angula…
阅读更多...
最新文章

Copyright @ 2022~2023