😺

Jetpack ComposeのLazyColumnとPaging3を組み合わせる

2 min read

タイトルの通りです。仕事で上手くいかなかったのに10分もかからず動いてくれたのでメモ
※必要な情報は公式の通りですが、Paging3のことと繋げて書いてあると自分が忘れた時に便利なので書きます。

完成画面

ページ番号-index-DATA(固定文字列)と表示しています。

gradle

def paging_version = "3.0.1"
implementation "androidx.paging:paging-runtime-ktx:$paging_version"
implementation "androidx.paging:paging-compose:1.0.0-alpha14"

PagingSource

package sobaya.app.repository.paging

import androidx.paging.PagingSource
import androidx.paging.PagingState

class SamplePagingSource : PagingSource<Int, String>() {
    override fun getRefreshKey(state: PagingState<Int, String>): Int? {
        return state.anchorPosition
    }

    override suspend fun load(params: LoadParams<Int>): LoadResult<Int, String> {
        val perPage = params.loadSize
        val page = params.key ?: 1
        val next = page + 1
        val prev = if (page == 1) null else page - 1

        return LoadResult.Page(
            data = (0..perPage).map { "$page-$it-DATA" },
            prevKey = prev,
            nextKey = next
        )
    }
}

こちらは普段Paging3を扱うのと全く同一なので特に解説はありません
今日になってgetRefreshKeyメソッドが追加されてることを初めて知りました。

ViewModel

val samplePagingFlow: Flow<PagingData<String>> = Pager(
    PagingConfig(pageSize = 10, initialLoadSize = 10)
) {
    SamplePagingSource()
}.flow.cachedIn(viewModelScope)

こちらも特に普段Paging3を使う時と同じです。

Composable

@Composable
fun SamplePagingList(
    viewModel: UserListViewModel
) {
    val lazyPagingItems = viewModel.samplePagingFlow.collectAsLazyPagingItems()

    LazyColumn {
        items(lazyPagingItems) { sample ->
            Text(text = sample ?: "")
        }
    }
}

いや、なんかすいません
ここまできたら公式に書かれてる事をコピペで終わりです。

最後に

コードはこのコミットです。

Discussion

ログインするとコメントできます