Jetpack Compose无ContentPadding时如何避免Lazy列表阴影被裁剪

结论 #

该需求完全可行，不需要添加任何额外内边距，也无需强制保留至少1dp的内边距即可实现等效clipToPadding=false的效果。

原理说明 #

LazyRow/LazyColumn默认会自动裁剪超出自身布局边界的内容，子元素的阴影属于布局边界外的绘制内容，因此滚动到列表边缘时会被裁剪，这和你设置的contentPadding为0.dp没有直接关联。

解决方案 #

只需要给LazyRow/LazyColumn添加Modifier.clipToBounds(false)属性，关闭组件的默认边界裁剪即可，修改后的示例代码如下：

LazyRow(
    state = listState,
    flingBehavior = flingBehavior,
    contentPadding = PaddingValues(all = 0.dp),
    modifier = Modifier.clipToBounds(false)
) {
    // 列表内容实现
}

补充说明 #

修改后列表边缘的阴影不会再被裁剪，完全满足无额外内边距的需求。如果Lazy组件外层还有父容器，需要确认父容器没有开启边界裁剪，否则超出父容器范围的阴影仍然会被裁剪。如果后续你需要设置contentPadding同时希望内容可以绘制到padding区域内，关闭clipToBounds的方案同样适用，可以等效实现原View系统中clipToPadding=false的效果。

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