如何模仿LazyColumn实现仅通过特定方法暴露Composable上下文的MediaPlayer组件

你需要实现一个MediaPlayer可组合项，要求限制布局只能通过特定方法（如playerLayout）定义，同时解决布局渲染的问题。以下是具体的解决方案：

现有问题分析 #

当前实现的核心问题有两个：

1. 使用单例MediaPlayerScopeInstance会导致多实例状态冲突，不符合Compose重组机制
2. playerLayout传入的Composable lambda无法被正确渲染到界面

修正后的实现代码 #

@Composable
fun MediaPlayer(
    playerState: MediaPlayerState = rememberMediaPlayerState(),
    content: MediaPlayerScope.() -> Unit
) {
    // 用remember创建Scope实例，避免重组时重复创建，保证状态隔离
    val scope = remember { MediaPlayerScopeImpl(playerState) }
    scope.playerState = playerState
    scope.content()

    // 渲染用户通过playerLayout定义的布局
    scope.playerLayoutContent?.invoke()
}

interface MediaPlayerScope {
    var controller: MediaPlayerController
    var playerState: MediaPlayerState

    fun mediaItems(items: List<MediaItem>)
    fun <T> mediaItems(original: List<T>, mapper: (T) -> MediaItem)

    fun playerLayout(layout: @Composable () -> Unit)
}

// 改为带状态的实现类，替代单例
private class MediaPlayerScopeImpl(
    initialState: MediaPlayerState
) : MediaPlayerScope {
    override var controller: MediaPlayerController = DefaultController
    override var playerState: MediaPlayerState = initialState

    // 保存布局lambda，确保Composable能正确触发重组
    private var _playerLayoutContent: (@Composable () -> Unit)? = null
    val playerLayoutContent: (@Composable () -> Unit)? get() = _playerLayoutContent

    override fun mediaItems(items: List<MediaItem>) {
        playerState.mediaItems = items
    }

    override fun <T> mediaItems(original: List<T>, mapper: (T) -> MediaItem) {
        playerState.mediaItems = original.map(mapper)
    }

    override fun playerLayout(layout: @Composable () -> Unit) {
        // 可选：禁止重复设置布局，抛出异常提示
        // check(_playerLayoutContent == null) { "playerLayout只能调用一次" }
        _playerLayoutContent = layout
    }
}

// 示例MediaPlayerState实现（需用mutableStateOf保证状态可观察）
class MediaPlayerState {
    var mediaItems by mutableStateOf(emptyList<MediaItem>())
    // 其他播放状态（如播放进度、是否播放等）也需用mutableStateOf定义
}

// 补充默认控制器和MediaItem示例
object DefaultController : MediaPlayerController
data class MediaItem(val id: String, val title: String)
interface MediaPlayerController

验证期望用法 #

MediaPlayer {
    mediaItems(viewModel.songList) {
        it.asMediaItem()
    }
    
    // 此处会编译报错：@Composable函数只能在@Composable上下文中调用，符合预期
    // Box { }

    // 此处正常生效，可编写Composable布局
    playerLayout {
        Box(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            contentAlignment = Alignment.Center
        ) {
            Text("自定义播放控件布局")
            // 可添加播放按钮、进度条等Composable组件
        }
    }
}

关键改进点 #

1. 状态隔离：用remember创建MediaPlayerScopeImpl实例，避免单例导致的多组件状态串用问题
2. 布局渲染：在MediaPlayer可组合项最后调用保存的playerLayoutContent，实现布局渲染
3. 上下文限制：content参数是普通lambda（非@Composable），直接编写Box {}这类Composable函数会编译报错，强制用户只能通过playerLayout定义布局

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