滚动Bottom Sheet时视频溢出问题排查与解决求助

问题根源 #

PlayerView默认采用SurfaceView作为视频渲染组件，而SurfaceView的绘制逻辑独立于Compose的布局体系——它直接在系统Window的Surface层渲染，不受Compose布局的裁剪规则约束。当Bottom Sheet滚动时，Compose的滚动容器只会裁剪自身布局内的Composable元素，但SurfaceView的视频内容会“突破”这个裁剪范围，导致溢出到Bottom Sheet边界之外。而ImageView是在Compose的View层级内绘制，自然会遵守布局约束，所以不会出现问题。

解决方案 #

1. 切换PlayerView的渲染载体为TextureView #

把SurfaceView换成TextureView就能让视频渲染融入Compose的布局体系，从而被正确裁剪。修改VideoPlayer中的PlayerView初始化代码：

AndroidView(
  modifier = modifier
    .clipToBounds(),
  factory = { ctx ->
    PlayerView(ctx).apply {
      player = exoPlayer
      resizeMode = AspectRatioFrameLayout.RESIZE_MODE_ZOOM
      // 强制使用TextureView替代默认的SurfaceView
      useTextureView = true
    }
  })

2. 给Bottom Sheet的滚动容器添加裁剪约束 #

不管使用Column(verticalScroll = rememberScrollState())还是LazyColumn，都必须给容器加上.clipToBounds()修饰符，确保所有子元素（包括替换后的TextureView）都被限制在Bottom Sheet的可视范围内：

// 示例Bottom Sheet布局代码
BottomSheetScaffold(
  sheetContent = {
    LazyColumn(
      modifier = Modifier
        .fillMaxWidth()
        .clipToBounds() // 关键：添加裁剪规则
    ) {
      item {
        VideoPlayer(
          modifier = Modifier.fillMaxWidth(),
          file = yourVideoFile
        )
      }
      // 其他内容项
    }
  }
) { /* 主界面内容 */ }

3. 对齐ExoPlayer与PlayerView的缩放配置 #

确保ExoPlayer的视频缩放模式和PlayerView的resizeMode匹配，避免因缩放逻辑不一致导致的溢出：

// 若PlayerView用RESIZE_MODE_ZOOM，对应ExoPlayer的SCALE_TO_FIT_WITH_CROPPING
exoPlayer.videoScalingMode = C.VIDEO_SCALING_MODE_SCALE_TO_FIT_WITH_CROPPING
// 若用RESIZE_MODE_FIT，对应SCALE_TO_FIT

额外提示 #

• 使用TextureView可能会比SurfaceView略占性能，如果遇到帧率问题，可以给VideoPlayer的AndroidView添加.graphicsLayer(alpha = 0.99f)——这会强制Compose将TextureView纳入硬件加速裁剪范围，同时规避SurfaceView的层级问题（这是临时 workaround，优先用useTextureView = true）。
• 记得在Composable销毁时正确释放ExoPlayer，你的现有代码已经做了这部分处理，无需修改。

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