基础播放控制UI：播放/暂停按钮、IconButton与AnimatedVisibility状态切换

原理

播放/暂停控制是多媒体UI最核心的交互单元。其本质是一个二值状态机：

• 状态：要么“播放中”（isPlaying = true），要么“暂停/未播放”（isPlaying = false）。
• 触发：用户点击按钮后，状态取反。
• 视觉反馈：按钮图标即时切换（暂停图标→播放图标，反之亦然）。
• 过渡动画：容器/面板出现或消失时，使用 AnimatedVisibility 产生淡入淡出、伸缩等效果，提升交互流畅感。

Jetpack Compose 提供 IconButton 组件作为可点击的图形按钮容器，配合 Icons.Filled.PlayArrow / Icons.Filled.Pause 实现图标切换；AnimatedVisibility 则基于状态变化驱动 Visibility 动画。

实现流程

1. 定义播放状态：使用 mutableStateOf(false) 持有布尔状态。
2. 构建 IconButton：设置 onClick 回调，切换状态。
3. 动态图标：根据状态选择 Icons.Filled.PlayArrow 或 Icons.Filled.Pause。
4. 包裹 AnimatedVisibility：将播放控制面板（如进度条、辅助按钮）放在 AnimatedVisibility 中，监听播放状态驱动显示/隐藏。
5. 配置动画参数：默认使用 fadeIn + slideInVertically / fadeOut + slideOutVertically，或自定义 EnterTransition / ExitTransition。

@Composable
fun PlayPauseControls(
    isPlaying: Boolean,
    onToggle: () -> Unit,
    modifier: Modifier = Modifier
) {
    IconButton(
        onClick = onToggle,
        modifier = modifier.size(56.dp)
    ) {
        Icon(
            imageVector = if (isPlaying) Icons.Filled.Pause
                          else Icons.Filled.PlayArrow,
            contentDescription = if (isPlaying) "暂停" else "播放",
            modifier = Modifier.fillMaxSize(),
            tint = Color.White
        )
    }

    // 用 AnimatedVisibility 控制辅助面板（如进度条）的出现/消失
    AnimatedVisibility(
        visible = isPlaying,
        enter = fadeIn() + slideInVertically { it },
        exit = fadeOut() + slideOutVertically { it }
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {
            // 此处可放置 Seeker、速度控制等 UI（后续章节展开）
            Text("播放中辅助面板", color = Color.White)
        }
    }
}

调试要点

• 动画冲突：AnimatedVisibility 的进入/退出动画可能与其他重组冲突，建议在 LaunchedEffect 中观察状态，避免过量重组。
• 图标缺失：确认已添加 implementation("androidx.compose.material:material-icons-extended") 依赖。
• 触摸区域：IconButton 默认最小尺寸 48dp，若图标显示不全，检查 Modifier.padding 是否过大。

常见错误

错误表现	原因	解决方案
点击无反应	onToggle 未传递给父 Composable 或状态未持久化	确保使用 remember { mutableStateOf(false) }
图标闪烁	动画进入/退出重叠导致短暂渲染错误	设置 EnterTransition 的 animationSpec = tween(300)，避免与 ExitTransition 同时触发
AnimatedVisibility 不显示	可见性状态与播放状态绑定错误	检查 visible = isPlaying 是否正确

性能与稳定性优化

• 避免不必要重组：将 isPlaying 状态放在最接近 UI 的 Composable 中，使用 derivedStateOf 或 remember 减少子节点重组。
• 动画资源回收：AnimatedVisibility 在退出完成后自动移除组件，无需手动析构。
• 与播放器状态解耦：建议使用 PlayerState 数据类持有 isPlaying，通过 StateFlow 在 ViewModel 中集中管理，UI 层仅做收集。

状态转换流程图