Flutter ListView播放视频列表(三)

); }

\

这段代码非常简单,通过Stack()配合Positioned()完成按钮的摆放

点击按钮跳转到另一个页面播放视频

跳转页面的时候需要传递2个值:

• 当前播放视频Url
• 是播放本地视频,还是播放网络视频.

跳转到第二个页面直接播放即可.(如您不知道如何播放可参考:Flutter 轮子:视频播放

横屏/竖屏

播放的时候就涉及到了屏幕是横屏还是竖屏

横屏代码为:

//横屏 static void setHorizontal(){ SystemChrome.setPreferredOrientations( [DeviceOrientation.landscapeLeft, DeviceOrientation.landscapeRight]); }

竖屏代码:

//竖屏 static void setVertical(){ // 强制竖屏 SystemChrome.setPreferredOrientations( [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); }

这段代码思路:

在页面初始化时,将屏幕改为横屏,在播放结束时将屏幕改为竖屏.

@override void initState() { super.initState(); //设置横屏 EntityState.setHorizontal(); } @override void dispose() { //设置竖屏 EntityState.setVertical(); super.dispose(); }

右下角按钮切换横屏/竖屏

//是否是横屏 默认横屏 bool isHorizontal = true;

Widget initPosition() { return Positioned( right: 40, bottom: 40, // horizontal_rule child: GestureDetector( onTap: () { isHorizontal = !isHorizontal; if (isHorizontal) { EntityState.setHorizontal(); } else { EntityState.setVertical(); } setState(() {}); }, child: Container( width: 100, height: 45, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.grey.withOpacity(0.8), borderRadius: BorderRadius.circular(10)), child: Text( isHorizontal ? "横屏" : "竖屏", style: TextStyle(color: Colors.white), ))), ); }

分析:

在右下角通过Stack()配合Positioned()来设置位置

因为在initState()方法初始化时已经设置了横屏,所以,默认为横屏

当点击文字横屏的时候,文字改变为竖屏,并调用竖屏的方法,改变手机朝向.

这段代码也没有什么难度.

效果图(1.3):

如果大家有什么地方不理解一定要在评论区留言哦~

右上角返回按钮

左上角通过Stack()配合Positioned()来设置位置

Widget initPopButton() { return Positioned( top: 25, left: 25, child: GestureDetector( onTap: () { Navigator.of(context).pop(); }, child: Container( width: 100, height: 45, alignment: Alignment.center, decoration: BoxDecoration( color: Colors.grey.withOpacity(0.8), borderRadius: BorderRadius.circular(10)), child: Icon(Icons.keyboard_return,color: Colors.white,), ), ), ); }

返回最简单,直接调用

Navigator.of(context).pop();

即可.

效果图(1.2):

视频播放结束返回

这个问题和上一章播放完重新播放思路一样.

@override void initState() { super.initState(); _controller.addListener(() { //当前进度 == 总进度 if (_controller.value.position == _controller.value.duration) { //表示已经播放完 Future.delayed(Duration.zero, () { Navigator.of(context).pop(); }); } }); }

• _controller.value.position 为当前播放进度
• _controller.value.duration 为总进度

当前进度 == 总进度说明播放完成,则直接

Navigator.of(context).pop();

即可.

这里要注意的是:

在initState()方法中context上下文还没有创建,所以不能直接使用,需要吧context放到队列之中.

改变状态栏颜色

//修改顶部状态栏颜色 static void setStatusBarColor(Color color){ SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor:color); SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); } 直接传一个颜色值即可. 在来看看效果图: 效果图(1.2): \ 完整代码 完整项目