Flutter中video_360插件的AndroidView高度被裁剪问题求助

问题描述 #

我在Flutter应用中使用video_360插件播放360视频，该插件Android端基于Exoplayer实现，采用AndroidView作为渲染组件。
当给Video360View套上SizedBox并将高度设为MediaQuery获取的屏幕高度时，视频高度会被裁剪一部分——视频本身没被缩放，是视图被调整了。试过控制器的height属性，没用。
后来把AndroidView的Clip设为none，确认是插件内部实现没让视频占满完整高度，而且这个问题只在横屏模式下出现。想知道能不能修改插件或者用Flutter的变通方法让组件完整显示？

解决方法 #

一、Flutter端临时变通方案 #

• 缩放调整法：用Transform组件给Video360View加缩放，根据实际裁剪的高度调整缩放因子，比如：

Transform.scale(
  scale: 1.1, // 自己测试着调，直到填满屏幕
  child: Video360View(
    controller: _controller,
    // 你的其他配置
  ),
)

• 突破容器限制法：用OverflowBox配合Align，让视图超出父容器一点点来填满屏幕：

OverflowBox(
  maxHeight: MediaQuery.of(context).size.height * 1.05, // 略大于屏幕高度
  child: Align(
    alignment: Alignment.center,
    child: Video360View(
      controller: _controller,
    ),
  ),
)

二、修改插件原生源码（Android端） #

既然问题出在插件的原生实现，直接改源码最彻底：

1. 找到插件Android模块里的布局文件（一般在res/layout目录下，对应Video360View的布局）
2. 把布局里的ExoPlayer视图宽高改成match_parent，并设置resize模式为fill：

<com.google.android.exoplayer2.ui.PlayerView
    android:id="@+id/player_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:resize_mode="fill" />

3. 再检查插件的原生初始化代码，确保给PlayerView设置了正确的resize模式：

playerView.setResizeMode(AspectRatioFrameLayout.RESIZE_MODE_FILL);

4. 重新编译插件，替换项目里的依赖后测试

内容的提问来源于stack exchange，提问作者Jiehfeng