Jetpack Compose中LazyColumn的底部过度滚动视觉提示如何实现

方案1：使用 Compose 自带默认过度滚动效果 #

从Jetpack Compose 1.2.0版本开始，compose-foundation 库已经默认集成了和XML布局一致的边缘过度滚动光晕效果，顶部、底部的过度滚动提示默认自带，无需额外引入三方组件：

• 如果你使用的是官方Material主题，该效果默认已经启用，直接正常编写LazyColumn代码即可生效
• 如果是自定义主题，可手动通过 LocalOverScrollConfiguration 开启：

CompositionLocalProvider(
    LocalOverScrollConfiguration provides OverScrollConfiguration()
) {
    LazyColumn {
        // 你的列表内容
    }
}

方案2：自定义底部过度滚动提示样式 #

如果你需要自定义底部过度滚动的视觉效果（比如自定义加载动画、提示文案），可以通过监听LazyColumn滚动状态自行实现，核心实现代码如下：

1. 先声明滚动状态和相关可观测变量

val listState = rememberLazyListState()
val overScrollOffset = remember { mutableStateOf(0f) }
// 判断是否滚动到列表底部
val isReachBottom = remember {
    derivedStateOf {
        listState.layoutInfo.visibleItemsInfo.lastOrNull()?.index == listState.layoutInfo.totalItemsCount - 1
    }
}

2. 给LazyColumn添加嵌套滚动监听，处理过度滚动逻辑

LazyColumn(
    state = listState,
    modifier = Modifier.nestedScroll(object : NestedScrollConnection {
        override fun onPreScroll(available: Offset, source: NestedScrollSource): Offset {
            // 滚动到底部后继续向下拖动时，记录过度滚动偏移
            if (isReachBottom.value && available.y < 0 && source == NestedScrollSource.Drag) {
                overScrollOffset.value += (-available.y).coerceAtMost(200f) // 限制最大拖动距离
                return Offset(0f, available.y)
            }
            return super.onPreScroll(available, source)
        }

        override fun onPostFling(consumed: Velocity, available: Velocity): Velocity {
            // 松手后触发回弹动画
            animate(
                initialValue = overScrollOffset.value,
                targetValue = 0f,
                animationSpec = tween(durationMillis = 200)
            ) { value, _ ->
                overScrollOffset.value = value
            }
            return super.onPostFling(consumed, available)
        }
    })
) {
    // 原有列表内容
    items(contentList) { item ->
        // 列表项布局
    }

    // 底部过度滚动提示区域
    if (overScrollOffset.value > 0) {
        item {
            Box(
                Modifier
                    .height(overScrollOffset.value.dp)
                    .fillMaxWidth(),
                contentAlignment = Alignment.Center
            ) {
                // 此处可替换为自定义的提示样式，比如加载动画、提示文案等
                CircularProgressIndicator(Modifier.size(24.dp), strokeWidth = 2.dp)
            }
        }
    }
}

方案3：扩展SwipeRefresh实现上下拉联动 #

如果你已经在使用Accompanist的SwipeRefresh组件做顶部下拉刷新，也可以直接在现有逻辑基础上扩展底部滚动监听，复用组件的动画能力，同时实现下拉刷新和上拉过度滚动/加载更多的效果，不需要额外引入其他依赖。

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