【Jetpack Compose】SwipeRefresh のプログレス表示を制御する際の注意点

Jetpack Compose にてSwipeRefreshLayoutを実現したい場合、Accompanist のSwipeRefreshを使用するのが一般的です。

Guide - Accompanist

以下は上記サイトに掲載されている例です。

val viewModel: MyViewModel = viewModel()
val isRefreshing by viewModel.isRefreshing.collectAsState()

SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { viewModel.refresh() },
) {
    LazyColumn {
        items(30) { index ->
            // TODO: list items
        }
    }
}

基本的にはこの例の通りに使えば問題ないですが、SwipeRefreshLayoutと 1 点異なる点がありました。

それは、「Pull-to-Refresh 時、プログレス表示を明示的に行わなければすぐに表示が消えてしまう」ことです。

Pull-to-Refresh時、プログレス表示を明示的に行わなければすぐに表示が消えてしまう

SwipeRefreshを定義する際、以下のように定義します。

SwipeRefresh(
    state = rememberSwipeRefreshState(isRefreshing),
    onRefresh = { viewModel.refresh() },
) {
    ...
}

これにより、isRefreshingがtrueの場合はプログレスが表示され、falseの場合はプログレスが表示されなくなります。

SwipeRefreshで Pull-to-Refresh 時、isRefreshingは自動的にtrueになりません。

そのため、viewModel.refresh()の中などでisRefreshingをtrueにしないとすぐに表示が消えてしまいます。

SwipeRefreshLayoutで Pull-to-Refresh を行った際はすぐに表示が消えず、何もしなければプログレスが表示されっぱなしになるため、盲点でした。

更新リクエストに応答する  |  Android デベロッパー  |  Android Developers

まとめ

Jetpack Compose にてSwipeRefreshLayoutを実現したい場合、Accompanist のSwipeRefreshを使用するのが一般的です。

その際の注意点として、プログレス非表示はもちろん、プログレス表示の制御を明示的に行うようにしてください。