注:亮度调节和音量调节gif无法体现,功能是ok的,其次默认Icon锁的close和open实在难以分辨。
目前成都创新互联公司已为近千家的企业提供了网站建设、域名、网站空间、网站托管维护、企业网站设计、平遥网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
环境:Flutter 2.8.1 channel stable ;Dart 2.15.1
需要音频播放器的看这里: Flutter音乐播放器
重点说下这个工具类,因为视频播放,涉及到状态改变有很多,笔者刚开始选择使用 InheritedWidget 来在众多的widget之间共享数据。但是总感觉这样有点繁琐,且不很优雅!
这里非广告,如果是使用 GetX 就很简单了,笔者也使用了 GetX 进行封装了,一泻千里的赶脚!,但是笔者还是那句话:刚开始接触Flutter的开发者不是很建议使用 GetX ,可以先熟悉下Flutter状态管理的基础原理再行使用。而且为了尽量简洁,还是不引入其他的第三方了。
我们选择对第三方插件进行封装的目的不外乎这几个:
于是笔者就写了一个工具类 VideoPlayerUtils ,专门且只用来处理播放器的所有业务。包括暂停、播放、跳转、调节音量、调节亮度、切换视频等操作。在所有的widget中不会引用关于 video_player 或其他第三方插件的任何信息, VideoPlayerUtils 负责widget与播放器之间的所有操作交互。后续优化迭代或更换播放器插件时,只需针对这个工具类进行修改,对所有widget不会有任何的影响,大大的解耦合了。
其中 VideoPlayerState :
提供以上的公共属性,可以通过 VideoPlayerUtils 来获取对应的值,使用 get 只读,使外界不会误修改这些属性,以保证数值的安全性。开发者可根据自身需要自行添加属性。
提供以上方法来处理播放器的所有业务。同样的开发者可根据自身需要自行添加或修改。
重点说下这个方法,是整个业务的核心方法,控制视频的播放或暂停。开发者只要遇到播放或暂停是均可调用此方法,具体是播放或暂停,内部根据传入的 url 自行判断,开发者不需要关心。
切换新视频也是使用此方法,传入的 url 与上次不一致,自动切换新视频。笔者可根据 statusListener 来监听播放状态的改变,以此处理自身逻辑。
这个也需要提下,视频播放器在播放新视频时会异步初始化,一般我们的操作是在 initState() 初始化,成功后再 setState() 。这里笔者遇到一个让人蛋疼的问题:
我们看 video_player 的使用:
VideoPlayer(controller) :widget中已经持有了controller。本来笔者封装的目的就是为了让widget与controller的之间解耦合。但此时的笔者。。。。
放弃不是不可能放弃的,这辈子都不会放弃的!
于是笔者取了巧,写了一个初始化监听器 initializedListener ,包换2个参数: bool,Widget ,初始化是否成功;其中widget为初始化成功返回需要展示的播放器UI,失败默认返回 const SizedBox() 。
到这里就可以简单使用了:
没看错,视频播放就是这么简单。
如果有更多的业务功能,笔者也按照自己的需求写了一套,同样的开发者可根据自身需要自行添加或修改。
VideoPlayerGestures 主要是处理手势的,比如快进、快退等跳转播放;左侧上下滑动调节亮度;右侧上下滑动调节音量;单击是否开启沉浸式播放,所有widget的隐藏与显示;双击播放、暂停等。
哦,还有 PercentageWidget 也放到这个文件下了,就是这玩意:
因为显示的百分比与手势相关,随着手势移动而更新。开发者可自行处理。
笔者处出于简单考虑,就按照整个UI的位置命名了。瞅一眼就知道是啥玩意。
同样的开发者可根据自身需要自行添加或修改。
就是这玩意:
同样的开发者可根据自身需要自行添加或修改。话说这个锁的 Icon 的open和close是真的难分辨!
就是这玩意:
同样的开发者可根据自身需要自行添加或修改。
这玩意是自定义的,别问,问就是跟产品干一架落了下风
主要就是自定义这玩意:
同样的开发者可根据自身需要自定义。
注:这里没有添加缓冲的进度,开发可查看 video_player 中的源码 VideoProgressIndicator ,按业务自行定义。
这玩意就是整合以上的widget,再考虑下全屏的安全区域,没啥东西。开发者可自行处理!
具体的实现监听器的思路, 看这里 。
自此一个漂亮的Flutter视频播放器就已经结束了。如果您觉得对您有些许帮助的话,欢迎 Star !
ScrollView 是一个带有滚动的视图组件。
ScrollView 由三部分组成:
ScrollView 有以下常用属性:
注:ScrollView 是一个抽象类,通常使用 CustomScrollView。
SliverAppBar 可以实现背景,标题,顶部导航栏联动,渐隐渐出动画。
SingleChildScrollView 源码定义如下:
需要注意的是, 通常 SingleChildScrollView 只应在期望的内容不会超过屏幕太多时使用 ,这是因为 SingleChildScrollView 不支持基于 Sliver 的延迟加载模型,所以如果预计视口可能包含超出屏幕尺寸太多的内容时,那么使用 SingleChildScrollView 将会非常昂贵(性能差),此时应该使用一些支持Sliver延迟加载的可滚动组件,如 ListView 。
示例1
下面是一个将大写字母 A-Z 沿垂直方向显示的例子,由于垂直方向空间会超过屏幕视口高度,所以我们使用SingleChildScrollView:
示例2
示例3 - 横向滚动
本文名称:包含flutter滚动视频的词条
网址分享:https://www.cdcxhl.com/article40/dseiieo.html
成都网站建设公司_创新互联,为您提供网站设计、App开发、、网站改版、域名注册、微信小程序
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联