自己尝试实现了一款视频列表播放简单Demo，代码还有很多需要优化的地方。 目前只是实现了简单的效果：列表播放，全屏，返回按键，暂停恢复，后台暂停。

网络请求与API:

视频播放器的选择：

横竖屏切换：

​ 实例化Retrofit:

定义列表接口：

Paging分页逻辑在VideoListDataSource.kt完成：

数据请求：Repository,

谷歌之前推荐的架构库 **官方Android应用架构库（Architecture Components）**推荐将ViewModel中的网络请求数据库交互部分交给Repository来处理，而ViewModel专注于业务和UI交互，并等待Repository去拿网络数据，大部分应用不需要每次都请求新的页面数据，最好是缓存到本地。于是该架构推荐Room数据库作为本地缓存，这样是比较完美的，也就是请求完列表页面数据给Room, 页面绘制优先拿Room的数据。但是我这里没有考虑实现。 ​

ViewModel拿到数据：

这里拿到是PagingData 的流，被viewModel收集，需要传入协程作用域，Paging内部会安排发送流：

上面viewModel 我们得到Flow { ContentInfoList( collectAsLazyPagingIDataList = collectAsLazyPagingIDataList, context = context, viewModel = viewModel ) } is LoadState.Error -> ErrorPage() { collectAsLazyPagingIDataList.refresh() } is LoadState.Loading -> LoadingPageUI() } } @ExperimentalCoilApi @Composable fun ContentInfoList( context: Context, collectAsLazyPagingIDataList: LazyPagingItems, viewModel: MainViewModel ) { val lazyListState = rememberLazyListState() val focusIndex by derivedStateOf { lazyListState.firstVisibleItemIndex } LazyColumn( state = lazyListState ) { itemsIndexed(collectAsLazyPagingIDataList) { index, videoItem -> // 传入列表卡片Item VideoCardItem( videoItem = videoItem!!, isFocused = index == focusIndex, onClick = { Toast.makeText(context, "ccc", Toast.LENGTH_SHORT).show() }, index = index, viewModel = viewModel ) } // 加载下一页业务逻辑 when (collectAsLazyPagingIDataList.loadState.append) { is LoadState.NotLoading -> { itemsIndexed(collectAsLazyPagingIDataList) { index, videoItem -> VideoCardItem( videoItem = videoItem!!, isFocused = index == focusIndex, onClick = { Toast.makeText(context, "ccc", Toast.LENGTH_SHORT).show() }, index = index, viewModel = viewModel ) } } is LoadState.Error -> item { NextPageLoadError { collectAsLazyPagingIDataList.retry() } } LoadState.Loading -> item { LoadingPageUI() } } } } /** * 页面加载失败重试 * */ @Composable fun ErrorPage(onclick: () -> Unit = {}) { Column( modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { Image( modifier = Modifier.size(219.dp, 119.dp), painter = painterResource(id = R.drawable.ic_default_empty), contentDescription = "网络问题", contentScale = ContentScale.Crop ) Button( modifier = Modifier.padding(8.dp), onClick = onclick, ) { Text(text = "网络不佳，请点击重试") } } } /** * 加载中动效 * */ @Composable fun LoadingPageUI() { Box( modifier = Modifier .fillMaxSize() .padding(170.dp), contentAlignment = Alignment.Center ) { val animator by rememberInfiniteTransition().animateFloat( initialValue = 0f, targetValue = 360f, animationSpec = infiniteRepeatable( tween(800, easing = LinearEasing), repeatMode = RepeatMode.Restart ) ) Canvas(modifier = Modifier.fillMaxSize()) { translate(80f, 80f) { drawArc( color = RedPink, startAngle = 0f, sweepAngle = animator, useCenter = false, size = Size(80 * 2f, 80 * 2f), style = Stroke(12f), alpha = 0.6f, ) } } } } /** * 加载下一页失败 * */ @Composable fun NextPageLoadError(onClick: () -> Unit) { Row( modifier = Modifier .fillMaxWidth() .padding(8.dp), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center, ) { Button(onClick = onClick) { Text(text = "重试") } } } 复制代码 四、列表的Item Item中需要嵌入播放器，由于播放器和布局是java代码写的，所以涉及两者相互调用。 LaunchedEffect：利用它，我们可以在@Compose中使用协程，官方文档是这么描述的： *要在可组合函数中安全地调用挂起函数，请使用launchedeeffect可组合函数。当launchedeeffect进入Composition时，它会启动一个协程，并将代码块作为参数传递。如果LaunchedEffect离开组合，协程将被取消*。 复制代码

先看布局代码：

分为上面的文案描述和播放器部分，这里我通过判断:

那么传统Android如何调用Compose呢？

代码或者xml中，Fragment中都可以使用Compose,如果是在代码中，假设前面的视频封面把他写在上面的方法中，就可以这么写：

Android View与Compose调用其实还有很多，这块了解有限。下面再说说播放器逻辑：

播放器布局用了exo自带的PlayerView，然后添加一个自己的player_controller_layout.xml

实例化PlayerView:

PlayerViewManager.kt

Compose视频列表播放