当前位置: 首页 > news >正文

flutter VideoPlayer适配:保持视频的原始宽高比,缩放视频使它完全覆盖父容器

在这里插入图片描述
需求:视频充满整个长方形容器不能有黑边;视频不能拉伸变形;视频可以显示不全。

当播放器放置在列表中时,它固定了宽度及高度是一个width : height 为16:9的横向长方形。
情况1:不使用AspectRatio设置横纵比例,它会默认充满整个父容器,用户上传横屏视频比例相差不大显示较为正常,当用户上传竖屏视频时会横向拉伸显示变形。
情况2:使用AspectRatio设置横纵比例,当用户上传竖屏视频时会在中间显示,左右两边出现大片空白区域。

适配:使用FittedBox设置BoxFit.cover使子控件等比占据父容器,再使用SizedBox.expand尽量大的填充父布局,最后ClipRRect裁剪掉超出Container容器的部分。此时

视频播放器适配代码:

import 'package:atui/jade/configs/PathConfig.dart';
import 'package:flutter/material.dart';
import 'package:video_player/video_player.dart';class TestVideo extends StatefulWidget{State<StatefulWidget> createState() {// TODO: implement createStatereturn _TestVideo();}
}class _TestVideo extends State<TestVideo>{VideoPlayerController _controller;Future<void> _initializeVideoPlayerFuture;double aspectRadio = 16.0 / 9.0;double _sizeWidth = 0.0;double _sizeHeight = 0.0;void initState(

http://www.mrgr.cn/news/61011.html

相关文章:

  • 鸿蒙应用开发实战-常用组件-图片组件
  • .NET Core WebApi第7讲:项目的发布与部署
  • SpringBoot框架在商场应急管理中的实践
  • CRM客户关系管理系统:全方位功能模块助力企业高效运营与增长
  • 从理解路由到实现一套Router(路由)
  • 理解dbt Exposures及应用示例
  • Java:多线程(线程池,执行原理,优雅停止,延迟周期)
  • 管家婆财贸ERP BB055.销售检查可销库存+BB058.读取品牌销售数量
  • vue中elementUI的el-select下拉框的层级太高修改设置!
  • PFC前端电路
  • 基于centos7.9搭建MariaDB10.5高可用集群
  • 落地分享:来看 UFH AI 医疗大模型如何助力国际化诊疗场景
  • 推荐一款出色的图像查看器:Pineapple Pictures
  • 02 什么是Babel
  • 揭秘程序员薪资密码:10K 与 20K 的思维 “分水岭”
  • 【C++】多态与虚函数:深入理解对象的动态行为(万字长文详解)
  • 设计资讯 | 塑造数字交互未来的 Sol Reader
  • 快捷回复软件助力客服高效工作
  • 基于SSM(spring+springmvc+mybatis)+MySQL开发的新闻推荐系统
  • 用低配置的轻薄本玩《黑神话》是一种什么样的体验?