Flutter ListView播放视频列表(三)
Flutter ListView播放视频列表③
- 点击跳转播放视频
- 横屏/竖屏
- 右下角按钮切换横屏/竖屏
- 右上角返回按钮
- 视频播放结束返回
- 改变状态栏颜色
人生如河，苦是转弯：思量和抉择，得到和失去，拿得起和放得下，我们需要放弃、割舍和遗忘；人生如叶，苦是漂泊：飘零的心，触碰不到依靠的岸。苦苦追寻和经受，留下凋落而孤寂的情怀；人生如戏，苦是相遇：奇妙的人生旅程，留下感念或者擦肩而过，相濡以沫或者分道扬镳，人生若只如初见。
今日效果,完成视屏播放横屏全屏显示:
效果图(1.1):
分析:
- 点击按钮跳转到另一个页面播放当前点击的视屏
- 当跳转到播放页面的时候,屏幕自动横屏
- 播放完成之后屏幕自动退出,并且屏幕变为竖屏
- 屏幕上有开始/暂停,返回,横屏/竖屏按钮
- 状态栏为透明色
点击跳转播放视频
代码:
//放大按钮
Widget initFullScreen() {
return GestureDetector(
child: Icon(
Icons.fullscreen,
color: Colors.white,
),
onTap: () {
NavigatorUtil.pushPage(
context: context,
widget:
FullScreenWidget(url: widget.url, videoPageEnum: widget.type));
},
);
}
这段代码非常简单,通过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):
完整代码
完整项目
上一章:Flutter 小知识:ListView播放视频列表(二)
原创不易,您的点赞就是对我最大的支持,点个赞支持一下吧~