关注公众号学习更多知识
概述
Compose中Paging3
的使用和Recycleview中Paging3的使用基本一致,不同的是Compose
中我们的ui使用LazyColumn
来承载数据。
我们需要做的事情如下:
- 配置
PagingSource
- 配置数据类
SimpleUseBean
- 配置
ViewModel
- 在LazyColumn中渲染数据
简单加载数据
依赖
var paging_version = "3.0.1"
implementation("androidx.paging:paging-runtime:$paging_version")
testImplementation("androidx.paging:paging-common:$paging_version")
implementation("androidx.paging:paging-compose:1.0.0-alpha12")
数据类
data class SimpleUseBean(val data: String="")
ViewModel
class SimpleUseViewModel : ViewModel() {
val projects = Pager(PagingConfig(pageSize = 20)){
SimpleUseSource()
}.flow.cachedIn(viewModelScope)
}
配置PagingSource
class SimpleUseSource : PagingSource<Int, SimpleUseBean>() {
override fun getRefreshKey(state: PagingState<Int, SimpleUseBean>): Int? =null
override suspend fun load(params: LoadParams<Int>): LoadResult<Int, SimpleUseBean> {
return try {
val nextPage = params.key ?: 1
val datas = mutableListOf(
SimpleUseBean("哈哈${params.key}"),
SimpleUseBean("哈哈${params.key}"),
SimpleUseBean("哈哈${params.key}"),
SimpleUseBean("哈哈${params.key}"),
SimpleUseBean("哈哈${params.key}")
)
LoadResult.Page(
data = datas,
prevKey = if (nextPage == 1) null else nextPage - 1,
nextKey = if (nextPage < 100) nextPage + 1 else null
)
} catch (e: Exception) {
LoadResult.Error(e)
}
}
}
渲染数据
@Composable
fun simpleUse() {
val model = viewModel<SimpleUseViewModel>()
val datas = model.projects.collectAsLazyPagingItems()
LazyColumn(content = {
itemsIndexed(datas) { _, data ->
Box(
Modifier
.padding(horizontal = 14.dp,vertical = 4.dp)
.fillMaxWidth()
.height(60.dp)
.border(1.dp, Color.Red, RoundedCornerShape(5.dp))
.padding(start = 10.dp)
,
contentAlignment = Alignment.CenterStart
) {
Text(text = data?.data ?: "")
}
}
})
}
实现效果
使用Compose、SwipeRefresh、LazyColumn实现刷新和加载数据
依赖
SwipeRefresh依赖
implementation ("com.google.accompanist:accompanist-swiperefresh:0.18.0")
PagingSource
class RefreshLoadUseSource : PagingSource<Int, RefreshData>() {
override fun getRefreshKey(state: PagingState<Int, RefreshData>): Int? = null
override suspend fun load(params: LoadParams<Int>): LoadResult<Int, RefreshData> {
return try {
val nextPage = params.key ?: 1
if (nextPage < 13) {
delay(1500)
val datas = mutableListOf(
RefreshData("哈哈${params.key}"),
RefreshData("哈哈${params.key}"),
RefreshData("哈哈${params.key}"),
RefreshData("哈哈${params.key}"),
RefreshData("哈哈${params.key}")
)
LoadResult.Page(
data = datas,
prevKey = if (nextPage == 1) null else nextPage - 1,
nextKey = if (nextPage < 100) nextPage + 1 else null
)
} else {//超过13条就加载错误
LoadResult.Error(NullPointerException("空指针"))
}
} catch (e: Exception) {
LoadResult.Error(e)
}
}
}
ViewModel和数据实体
data class RefreshData(val data: String)
class RefreshLoadUseViewModel : ViewModel() {
val datas = Pager(PagingConfig(pageSize = 20)) {
RefreshLoadUseSource()
}.flow.cachedIn(viewModelScope)
}
ui代码
@Composable
fun refreshLoadUse() {
val refreshState = rememberSwipeRefreshState(isRefreshing = false)
val model = viewModel<RefreshLoadUseViewModel>()
val collectAsLazyPagingItems = model.datas.collectAsLazyPagingItems()
SwipeRefresh(state = refreshState, onRefresh = {
collectAsLazyPagingItems.refresh()
}) {
LazyColumn(
modifier = Modifier
.fillMaxWidth()
.fillMaxHeight(),
content = {
itemsIndexed(collectAsLazyPagingItems) { _, refreshData ->//每个item的展示
Box(
modifier = Modifier
.padding(horizontal = 14.dp, vertical = 4.dp)
.fillMaxWidth()
.height(50.dp)
.background(Color.Green,shape= RoundedCornerShape(8.dp))
.border(
width = 1.dp,
color = Color.Red,
shape = RoundedCornerShape(8.dp)
)
.padding(start = 10.dp),
contentAlignment = Alignment.CenterStart
) {
Text(text = refreshData?.data ?: "")
}
}
when (collectAsLazyPagingItems.loadState.append) {
is LoadState.Loading -> {//加载中的尾部item展示
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp),
contentAlignment = Alignment.Center
) {
Text(text = "加载中。。。")
}
}
}
else -> {//加载完成或者加载错误展示的尾部item
item {
Box(
modifier = Modifier
.fillMaxWidth()
.height(50.dp),
contentAlignment = Alignment.Center
) {
Text(text = "--加载完成或加载错误--")
}
}
}
}
})
}
}
实现效果
git: https://github.com/ananananzhuo-blog/ComposePaging3Sample