Jetpack Compose中ExoPlayer切换Tabs视频花屏问题咨询

问题背景 #

使用Jetpack Compose构建模块化Clean架构的Android应用，页面顶部嵌入ExoPlayer播放器，下方为Tabs布局。切换Tab或多次点击自定义控制器时，视频出现花屏/画面错乱现象；仅当Tab内容包含Text组件时触发问题，使用Box或Spacer则无异常。

核心代码片段 #

@Composable
internal fun LessonDetailsScreenRoute(
) {
    var selectedVideoUrl by remember { mutableStateOf<String?>(dummyUrl) }
    var selectedTab by remember {
        mutableStateOf(LessonDetailsScreenTabs.CONTENT)
    }

    Column (modifier = Modifier.fillMaxSize()){
        PlayerContainer(selectedVideoUrl)
        LessonDetailsScreen(
            selectedTab = selectedTab,
            onTabSelected = { newTab -> selectedTab = newTab },
        )
    }
}

@Composable
internal fun LessonDetailsScreen(
    selectedTab: LessonDetailsScreenTabs,
    onTabSelected: (LessonDetailsScreenTabs) -> Unit,
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .background(MaterialTheme.colorScheme.background)
    ) {
        LessonAppBar(chapterName = chapterName, lessonName = lessonName, onBackPressed = onBackPressed)

        UtkorshoTabs(
            titles = lessonDetailsTabsTitle,
            tabIdentifier = LessonDetailsScreenTabs.entries,
            tabSelected = selectedTab,
            onTabSelected = onTabSelected
        )

        when (selectedTab) {
            LessonDetailsScreenTabs.CONTENT -> {
                Text(text = "Content Tab")
            }
            LessonDetailsScreenTabs.QNA -> {
                Box(modifier = Modifier.size(50.dp))
            }
        }
    }
}

@OptIn(UnstableApi::class)
@Composable
fun PlayerContainer(videoUrl: String?) {
    val context = LocalContext.current

    val playerInstance = remember {
        ExoPlayer.Builder(context).build().apply {
            playWhenReady = true
        }
    }

    LaunchedEffect(videoUrl) {
        Log.d("PROBLEM_DIAGNOSIS", "Preparing player with URL: $videoUrl")
        videoUrl?.let {
            val mediaSource = createDataSource(it)
            playerInstance.setMediaSource(mediaSource)
            playerInstance.prepare()
        }
    }

    DisposableEffect(Unit) {
        onDispose {
            Log.d("PROBLEM_DIAGNOSIS", "Releasing player as screen is disposed")
            playerInstance.release()
        }
    }

    AndroidView(
        factory = { ctx ->
            Log.d("PROBLEM_DIAGNOSIS", "PlayerView created")
            PlayerView(ctx).apply {
                player = playerInstance
            }
        },
        update = { view ->
            Log.d("PROBLEM_DIAGNOSIS", "PlayerView updated")
            view.player = playerInstance
        },
        modifier = Modifier
            .fillMaxWidth()
            .height(300.dp)
    )
}

问题分析 #

花屏的本质是**Text组件触发的高频重组，导致AndroidView的update块重复设置ExoPlayer实例，干扰了播放器的渲染流程**。Text因自身布局测量特性，重组时会触发更多的UI树更新，进而传递到上方的PlayerContainer，引发PlayerView的不必要重绘。

修复步骤 #

1. 移除AndroidView中重复的Player设置 #

PlayerContainer内的AndroidView在update块重复给View赋值player，这会强制PlayerView重置渲染状态，是花屏的直接原因。修改如下：

AndroidView(
    factory = { ctx ->
        Log.d("PROBLEM_DIAGNOSIS", "PlayerView created")
        PlayerView(ctx).apply {
            player = playerInstance
            // 在这里配置控制器、渲染模式等固定属性
        }
    },
    // 仅在播放器配置需要变更时执行更新逻辑，移除重复的player赋值
    update = { view ->
        Log.d("PROBLEM_DIAGNOSIS", "PlayerView updated")
        // 示例：仅当播放源切换后需要调整UI时才处理
        // view.setShowBuffering(PlayerView.SHOW_BUFFERING_WHEN_PLAYING)
    },
    modifier = Modifier
        .fillMaxWidth()
        .height(300.dp)
)

2. 强化PlayerContainer的重组隔离 #

用key函数将PlayerContainer的重组范围限制在videoUrl变化时，避免受下方Tab切换的影响：

Column (modifier = Modifier.fillMaxSize()){
    // 仅在videoUrl变化时重建PlayerContainer
    key(selectedVideoUrl) {
        PlayerContainer(selectedVideoUrl)
    }
    LessonDetailsScreen(
        selectedTab = selectedTab,
        onTabSelected = { newTab -> selectedTab = newTab },
    )
}

3. 优化Tab内容的重组稳定性 #

将包含Text的Tab内容封装为独立Composable，并用remember稳定文本内容，减少重组传递：

@Composable
private fun ContentTabContent() {
    // 用remember固定文本实例，避免每次重组重新创建
    val tabText = remember { "Content Tab" }
    Text(text = tabText)
}

// 在LessonDetailsScreen中替换原代码
when (selectedTab) {
    LessonDetailsScreenTabs.CONTENT -> {
        ContentTabContent()
    }
    LessonDetailsScreenTabs.QNA -> {
        Box(modifier = Modifier.size(50.dp))
    }
}

4. 优化ExoPlayer渲染配置 #

明确开启硬件加速，适配Compose的渲染环境：

val playerInstance = remember {
    ExoPlayer.Builder(context)
        .setRenderersFactory(DefaultRenderersFactory(context).apply {
            setEnableHardwareAcceleration(true)
            setEnableDecoderFallback(true)
        })
        .build().apply {
            playWhenReady = true
        }
}

验证方法 #

修改后切换Tab并点击控制器，观察视频画面是否恢复正常：

• 若问题解决，说明是不必要的PlayerView更新导致的渲染冲突
• 若仍有异常，可尝试给PlayerContainer的AndroidView添加Modifier.clipToBounds()，避免绘制溢出干扰

内容的提问来源于stack exchange，提问作者MD ABDUL HADY