You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Jetpack Compose 中Column组件过度滚动时如何显示水波纹效果?

Column 过度滚动水波纹效果实现说明

Jetpack Compose 1.3.0及以上版本已经原生支持你说的过度滚动水波纹(边缘光晕)效果,不需要额外复杂开发,具体实现规则如下:

  • 如果你项目引入了Material 2/Material 3主题,默认状态下添加了Modifier.verticalScroll(rememberScrollState())的Column已经自带过度滚动水波纹效果,不需要额外添加配置。
  • 如果你没有使用Material主题,或者全局关闭了过度滚动配置,可以手动为Column添加过度滚动修饰符:
Column(
    modifier = Modifier
        .fillMaxSize()
        .verticalScroll(rememberScrollState())
        // 手动应用过度滚动效果
        .overscroll(rememberEdgeEffectOverscroll())
) {
    // Column内部子组件内容
}
  • 如需自定义水波纹颜色,可给rememberEdgeEffectOverscroll()传入指定颜色参数,示例:rememberEdgeEffectOverscroll(color = Color(0xFF2196F3))
  • 如果你当前使用的Compose版本低于1.3.0,需要先将Compose版本升级至1.3.0及以上,同时配套升级Kotlin版本至1.7.0及以上,即可使用上述内置API实现效果。
  • 注意:仅当Column的内容高度超过父布局高度,可触发滚动时,才会展示过度滚动效果。

内容的提问来源于stack exchange,提问作者jobtrainingonbs

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.09.25 00:36:02