[Android] 039. プルダウンリフレッシュ(PullRefreshIndicator)

X(Twitter)とかであるリストを上から下にスワイプしてリロードする時にIndicatorを表示するUIの実装です

Accompanistにその機能があったのですがJetpack Composeに取り込まれてPullRefreshIndicatorとなりました
https://google.github.io/accompanist/swiperefresh/

PullRefreshIndicatorは無印のmaterialに実装されていてmaterial3には未実装ですがmaterial3のコントロールでも使用できます

使用する場合はandroidx.compose.material:materialをimplementationしてください

とりあえずサクッと試します

スクロールが縦の場合に動作します
Accompanistの例にもあるようにmaterial3のLazyColumnでも動作しました

var _refreshing = mutableStateOf(false)
suspend fun test() = coroutineScope {
    _refreshing.value = true
    delay(3_000)
    _refreshing.value = false
}

@OptIn(ExperimentalMaterialApi::class)
@Composable AppContent() {
    val coroutineScope = rememberCoroutineScope()
    val refreshing by remember { _refreshing }
    val pullRefreshState = rememberPullRefreshState(refreshing, {
        coroutineScope.launch {
            test()
        }
    })

    Box(
        Modifier
            .fillMaxSize()
            .pullRefresh(pullRefreshState)
            .verticalScroll(rememberScrollState())
            //.horizontalScroll(rememberScrollState())
    ) {
        PullRefreshIndicator(
            refreshing,
            pullRefreshState,
            Modifier.align(Alignment.TopCenter)
        )
    }
}

Android Studio Dolphin 2021.3.1 Patch 1 built on September 30, 2022