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
相关产品推荐
相关产品推荐

