进度条组件：LinearProgressIndicator、Slider双向绑定与SeekTo操作

播放进度条是多媒体UI中最关键的交互元素之一。用户通过进度条了解播放位置，并可直接拖拽跳转。在Jetpack Compose中，LinearProgressIndicator提供视觉反馈，Slider提供拖拽交互，两者需通过ViewModel状态的双向绑定实现同步。本章将剖析其数据流原理，并完整实现SeekTo操作。

4.1 原理：进度条状态流转与双向绑定机制

进度条组件的核心数据流遵循单向数据流（UDF）模式，但在Slider拖拽时需临时打破UDF以实现“双向绑定”。其状态流转如下图所示：

4.2 实现流程：从LinearProgressIndicator到Slider集成

实现分四个阶段，从单纯展示到完整交互：

1. 安装依赖： 在build.gradle.kts中添加Material3库（已包含LinearProgressIndicator与Slider）。
2. 创建播放状态数据层： 定义PlaybackState数据类，并在ViewModel中暴露StateFlow。
3. 实现LinearProgressIndicator： 将播放位置转换为0f..1f浮点数，直接传入progress参数。
4. 实现Slider双向绑定： 处理onValueChange（更新临时位置）、onValueChangeFinished（触发SeekTo）。

4.3 核心代码实现：数据层与UI层

4.3.1 播放状态数据类与ViewModel

data class PlaybackState(
    val currentPosition: Long = 0L,
    val duration: Long = 1L,       // 防止除零
    val isPlaying: Boolean = false,
    val isDragging: Boolean = false
)

class PlayerViewModel : ViewModel() {
    private val _state = MutableStateFlow(PlaybackState())
    val state: StateFlow<PlaybackState> = _state.asStateFlow()

    fun updateProgress(position: Long, duration: Long) {
        if (!_state.value.isDragging) {   // 拖拽期间阻断位置更新
            _state.update { it.copy(currentPosition = position, duration = duration) }
        }
    }

    fun onDragStart() {
        _state.update { it.copy(isDragging = true) }
    }

    fun onDragEnd(positionMs: Long) {
        _state.update { it.copy(currentPosition = positionMs, isDragging = false) }
        // 触发SeekTo
        viewModelScope.launch {
            mediaController?.seekTo(positionMs)
        }
    }
}

4.3.2 LinearProgressIndicator：只读进度展示

@Composable
fun PlaybackProgressBar(state: PlaybackState) {
    val progress = if (state.duration > 0) {
        state.currentPosition.toFloat() / state.duration.toFloat()
    } else 0f

    LinearProgressIndicator(
        progress = { progress },  // lambda形式支持动画
        modifier = Modifier.fillMaxWidth().height(4.dp),
        color = MaterialTheme.colorScheme.primary,
        trackColor = MaterialTheme.colorScheme.surfaceVariant,
    )
}

4.3.3 Slider：拖拽交互与SeekTo触发

@Composable
fun SeekSlider(
    state: PlaybackState,
    onDragStart: () -> Unit,
    onDragEnd: (Long) -> Unit,
    onValueChange: (Float) -> Unit
) {
    // 当前Slider显示的值：拖拽时用临时值，非拖拽时用实际进度
    val sliderValue = remember(state.currentPosition, state.duration, state.isDragging) {
        mutableFloatStateOf(
            if (state.duration > 0) state.currentPosition.toFloat() / state.duration.toFloat()
            else 0f
        )
    }

    Slider(
        value = sliderValue.floatValue,
        onValueChange = { newValue ->
            sliderValue.floatValue = newValue
            onValueChange(newValue)   // 更新ViewModel的临时位置
        },
        onValueChangeFinished = {
            // 计算目标毫秒位置并触发SeekTo
            val targetMs = (sliderValue.floatValue * state.duration).toLong()
            onDragEnd(targetMs)
        },
        modifier = Modifier.fillMaxWidth(),
        colors = SliderDefaults.colors(
            thumbColor = MaterialTheme.colorScheme.primary,
            activeTrackColor = MaterialTheme.colorScheme.primary,
            inactiveTrackColor = MaterialTheme.colorScheme.surfaceVariant,
        )
    )
}

4.3.4 组合使用：UI层整合

@Composable
fun PlayerControls(viewModel: PlayerViewModel) {
    val state by viewModel.state.collectAsStateWithLifecycle()

    Column(modifier = Modifier.padding(horizontal = 16.dp)) {
        // 进度条（只读显示）
        PlaybackProgressBar(state)

        Spacer(modifier = Modifier.height(4.dp))

        // 滑块（交互）
        SeekSlider(
            state = state,
            onDragStart = { viewModel.onDragStart() },
            onDragEnd = { positionMs -> viewModel.onDragEnd(positionMs) },
            onValueChange = { progress ->
                val tempPosition = (progress * state.duration).toLong()
                viewModel.updateProgress(tempPosition, state.duration)
            }
        )

        // 时间显示
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceBetween
        ) {
            Text(text = formatDuration(state.currentPosition))
            Text(text = formatDuration(state.duration))
        }
    }
}

4.4 调试：验证Slider与进度条同步行为

4.5 性能与稳定性优化

• 重组最小化： 使用derivedStateOf将currentPosition / duration的计算结果缓存，避免每次重组时重新计算。
• Slider值稳定性： 使用remember + mutableFloatStateOf持有Slider的临时值，防止在非拖拽期间因ViewModel状态更新导致Slider值微调。
• 生命周期感知： 使用collectAsStateWithLifecycle()确保在后台时停止位置更新收集，降低CPU占用。
• 精度控制： 将Slider步长设为0.001f（即千分之一），对于10分钟的视频，每个步进代表600ms，平衡精度与性能。