LazyRowでSwipe Refresh

LazyRowでSwipe refreshを実装した際のメモです。

バージョンは以下
Jetpack compose 1.1.1
accompanist Swipe Refresh 0.23.1

Swipe Refresh for Jetpack Compose

accompanistにはJetpack composeでSwipe Refreshを実装するためのcomposableが用意されています。

SwipeRefresh.kt

@Composable
fun SwipeRefresh(
    state: SwipeRefreshState,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier,
    swipeEnabled: Boolean = true,
    refreshTriggerDistance: Dp = 80.dp,
    indicatorAlignment: Alignment = Alignment.TopCenter,
    indicatorPadding: PaddingValues = PaddingValues(0.dp),
    indicator: @Composable (state: SwipeRefreshState, refreshTrigger: Dp) -> Unit = { s, trigger ->
        SwipeRefreshIndicator(s, trigger)
    },
    clipIndicatorToPadding: Boolean = true,
    content: @Composable () -> Unit,
)

LazyRowで使う

SwipeRefreshはcontentが垂直方向にスクロール可でなければ動作しません。
（内部でModifier.nestedScroll()を利用しており、contentに対するスクロール操作を検知している）
LazyRowの場合は、Modifier.scrollable()を追加することで動作します。

Example.kt

@Composable
fun LazyRowSwipeRefresh(
    isRefresh: Boolean,
    onRefresh: () -> Unit,
) {
    SwipeRefresh(
        isRefresh = isRefresh,
        onRefresh = onRefresh,
    ) {
        LazyRow(
            modifier = Modifier.scrollable(
                state = rememberScrollableState(
                    consumeScrollDelta = { 0f }
                ),
                orientation = Orientation.Vertical,
            ),
            content = { }
        )
}