如何在Jetpack Compose中结合reverseLayout的LazyColumn使用SwipeRefresh

当LazyColumn设置reverseLayout=true后，列表起始位置变为屏幕底部、滚动方向反转，这会导致SwipeRefresh默认手势检测逻辑失效——因为SwipeRefresh默认监听列表顶部的下拉手势，但此时列表的"逻辑顶部"实际在屏幕底部，原有检测逻辑无法正确识别手势。

下面提供三种适配方案，分别满足不同交互需求：

方案1：适配SwipeRefresh实现底部下拉刷新 #

通过监听LazyListState的状态，判断是否处于可刷新位置（即reverseLayout后的列表起始位置，对应屏幕底部），仅允许在此位置触发SwipeRefresh：

@Composable
fun CRFilesPage(
    uiState: StateFlow<ViewModel.UiState>,
    refreshList: () -> Unit
) {
    val state = uiState.collectAsState()
    val lazyListState: LazyListState = rememberLazyListState()
    
    // 判断是否处于可刷新位置：reverseLayout下，firstVisibleItemIndex为0且偏移为0时，到达列表最底部（逻辑顶部）
    val isAtRefreshPosition = remember {
        derivedStateOf {
            lazyListState.firstVisibleItemIndex == 0 && lazyListState.firstVisibleItemScrollOffset == 0
        }
    }
    
    val swipeRefreshState = rememberSwipeRefreshState(
        isRefreshing = state.value.isSending
    )

    SwipeRefresh(
        state = swipeRefreshState,
        onRefresh = { refreshList() },
        enabled = isAtRefreshPosition.value // 仅允许在可刷新位置触发
    ) {
        LazyColumn(
            state = lazyListState,
            reverseLayout = true
        ) {
            items(items = state.value.comments, key = { it.id }) {
                Text(text = it.comment)
            }
        }
    }
}

方案2：实现底部上拉刷新（贴合聊天场景） #

聊天场景通常需要上拉加载更早的消息，无需依赖SwipeRefresh，直接监听LazyListState的滚动状态，当滚动到列表逻辑底部（reverseLayout后的屏幕顶部）时触发刷新：

@Composable
fun CRFilesPage(
    uiState: StateFlow<ViewModel.UiState>,
    refreshList: () -> Unit
) {
    val state = uiState.collectAsState()
    val lazyListState: LazyListState = rememberLazyListState()
    val scope = rememberCoroutineScope()

    // 监听滚动，当可见最后一项为列表最后一条数据时，触发刷新
    LaunchedEffect(lazyListState) {
        snapshotFlow {
            lazyListState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == state.value.comments.size - 1
        }.collect { isAtTop ->
            if (isAtTop && !state.value.isSending) {
                scope.launch { refreshList() }
            }
        }
    }

    LazyColumn(
        state = lazyListState,
        reverseLayout = true
    ) {
        items(items = state.value.comments, key = { it.id }) {
            Text(text = it.comment)
        }
        // 添加加载状态提示
        if (state.value.isSending) {
            item {
                Box(Modifier.fillMaxWidth().padding(16.dp)) {
                    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
                }
            }
        }
    }
}

方案3：自定义反向SwipeRefresh（上拉触发） #

如果一定要用SwipeRefresh风格的交互实现上拉刷新，可以自定义一个支持向上手势的SwipeRefresh组件：

@Composable
fun ReverseSwipeRefresh(
    state: SwipeRefreshState,
    onRefresh: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    val configuration = LocalConfiguration.current
    val refreshTriggerDistance = with(LocalDensity.current) {
        configuration.swipeRefreshTriggerDistance.toPx()
    }

    Box(modifier) {
        content()

        // 监听向上拉的手势
        PointerInput(state) {
            detectVerticalDragGestures(
                onDrag = { _, dragAmount ->
                    if (!state.isRefreshing) {
                        // 向上拖动时dragAmount为负，累加后偏移为负，对应上拉距离
                        state.offset = (state.offset + dragAmount).coerceIn(-refreshTriggerDistance, 0f)
                    }
                },
                onDragEnd = {
                    if (state.offset <= -refreshTriggerDistance / 2) {
                        onRefresh()
                    }
                    coroutineScope {
                        state.animateOffsetTo(0f)
                    }
                }
            )
        }

        // 自定义底部指示器
        SwipeRefreshIndicator(
            state = state,
            refreshTriggerDistance = refreshTriggerDistance,
            modifier = Modifier.align(Alignment.BottomCenter)
        )
    }
}

使用方式：

@Composable
fun CRFilesPage(
    uiState: StateFlow<ViewModel.UiState>,
    refreshList: () -> Unit
) {
    val state = uiState.collectAsState()
    val lazyListState: LazyListState = rememberLazyListState()
    val swipeRefreshState = rememberSwipeRefreshState(isRefreshing = state.value.isSending)

    ReverseSwipeRefresh(
        state = swipeRefreshState,
        onRefresh = { refreshList() }
    ) {
        LazyColumn(
            state = lazyListState,
            reverseLayout = true
        ) {
            items(items = state.value.comments, key = { it.id }) {
                Text(text = it.comment)
            }
        }
    }
}

内容的提问来源于stack exchange，提问作者JBrown