The configuration parameters you most often tweak:
参数
作用
pageSize
每次向后请求多少条
initialLoadSize
首次渲染时想一次性拿多少条
prefetchDistance
滚动到距离底部还有多少条时提前预取下一页
enablePlaceholders
是否显示占位 item；大多数网络接口不返回总数，建议关掉。说起来，
"Why cachedIn?" Because `` Each collector would launch a brand‑new pagination pipeline orwise – causing duplicated network calls and losing scroll position after configuration changes.
五、Compose 中显示 PagingData
@Composable
fun CourseListRoute){
// 将 Flow 转换为 LazyPagingItems，这一步必须在 Composable 中完成
val courses= viewModel.courses.collectAsLazyPagingItems
CourseListScreen
}
kotlin
@Composable
fun CourseListScreen{
when{
is LoadState.Loading -> LoadingContent
is LoadState.Error -> ErrorContent(
message=refreshState.error.message?
:"课程加载失败",onRetryClick={courses.retry}
)
is LoadState.NotLoading ->{
if{
EmptyContent})
}else{
CoursePagingList
}
}
}
//--- 假数据生成 -------------------------------------------------------------
private const val TOTAL_PAGE=5
private fun createCourses:List{
val start=*size+1
return List{ idx ->
val id=start+idx
Course
}
}
//--- ViewModel ---------------------------------------------------------------
class CourseListViewModel : ViewModel{
val courses=
Pager(PagingConfig(pageSize=10,initialLoadSize=10,prefetchDistance=2。enablePlaceholders=false)){
CoursePagingSource
}.flow.cachedIn
}
//--- UI ----------------------------------------------------------------------
@Composable
fun CourseListRoute){
val pagingItems=vm.courses.collectAsLazyPagingItems
CourseListScreen
}
@Composable
fun CourseListScreen{
Scaffold{ innerPadding ->
Box.padding){
when{
is LoadS tate.Loading -> LoadingContent
is LoadS tate.Error -> ErrorContent(message=
rs.error.message?:\"课程读取失败\",onRetryClick={pages.retry})
is LoadS tate.NotLoading ->{
if{
EmptyContent})
}else{
CoursesList
}
}
}
}
}
@Composable
fun CoursesList{
LazyColumn。verticalArrangement=
Arrangement.spacedBy){
when{
is L oadSta te.Loading->Text
is L oadSta te.Error->{
Text(text=
appendStat.error.message?:\"加 載失敗\")
OutlinedButton{
Text
}}
is L oadSta te.NotLoading->{
if{
Text(\"— 已经到底了 —\",style=
MaterialTheme.typography.bodySmall )
}else{
Text
}}
}//when
@Composable
fun LoadingConte nt(text:String,modifier:
Modi fier=M odifier.padding){
Column,horizontalAlignment =
Alignment.CenterHorizontally ){
CircularProgressIndicator
Spacer(modifier.
Modifier.height)
Text
}
}
@Composable
fun ErrorConte nt(message:String,onRetryC lick:
->U nit。modifier:
Modi fier=M odifier.padding){
Column(horizontalAlignment =
Alignment.CenterHorizontally ){
Text
Button} ){
Tex t
}
}
}
@Composable
fun EmptyConte nt(onRefreshC lick:
->U nit,modifier:
Modi fier=M odifier.padding){
Column(horizontalAlignment =
Alignment.CenterHorizontally ){
Tex t
Button} ){
Tex t
}
}//col
This demo demonstrates:
首屏自动触发 Refresh 并显示 Loading／Error／Empty 状态。
滚动到底部自动触发 Append，实现无限滚动。
模拟第 三页故障，用于展示底部错误并支持 Retry。
使用 cachedIn 保证旋转屏幕后不会重新请求已缓存的数据。
定义分页源
class XxxPagi ngSou rce:</t d td class="">① ③ ④ ⑤ ⑥
