我需要实现LazyColumn的顶部褪色边缘效果。在Android上我使用fade gradient for ListView or RecyclerView,但无法找到任何解决方案的Jetpack合成!
我试着修改画布:
@Composable
fun Screen() {
Box(
Modifier
.fillMaxWidth()
.background(color = Color.Yellow)
) {
LazyColumn(
modifier = Modifier
.fillMaxSize()
.drawWithContent {
val colors = listOf(Color.Transparent, Color.Black)
drawContent()
drawRect(
brush = Brush.verticalGradient(colors),
blendMode = BlendMode.DstIn
)
}
) {
itemsIndexed((1..1000).toList()) { item, index ->
Text(
text = "Item $item: $index value",
modifier = Modifier.padding(12.dp),
color = Color.Red,
fontSize = 24.sp
)
}
}
}
}
但结果却错了:
5条答案
按热度按时间eeq64g8w1#
解决问题的快速黑客:将
.graphicsLayer { alpha = 0.99f }
添加到修改器默认情况下,Jetpack Compose出于性能原因禁用alpha合成(如here;请参阅“自定义修改器”一节)。如果没有alpha合成,影响透明度的混合模式(例如
DstIn
)将无法获得所需的效果。目前最好的解决方法是将.graphicsLayer { alpha = 0.99F }
添加到LazyColumn
上的修改器;这将强制Jetpack Compose通过使LazyColumn
透明到无法察觉的程度来启用alpha合成。进行此更改后,代码如下所示:
从而产生正确的结果
brjng4g32#
你可以在列表的顶部放置一个
Spacer
,然后在Box上绘制一个渐变。使Box变小,这样只有列表的一小部分有覆盖层。使颜色与屏幕背景相同,这样看起来内容就像是在褪色。它的外观如下:
然而,这似乎并不是您所要求的,因为您似乎希望实际的列表内容淡出。我不知道您如何将
alpha
应用于视图的一部分。也许您可以尝试深入研究.alpha
源代码来找出答案。amrnrhlw3#
只需朝正确的方向稍微移动一下。这段代码所做的是在LazyColumn的顶部放置一个Box可组合对象,并使用alpha修改器进行淡入淡出。您可以再次在一个Column中创建多个Box可组合对象,以创建更平滑的效果。
zvokhttg4#
我优化了@user3872620解决方案。您只需将这几行放在LazyColumn、VerticalPager..下面,然后调整偏移/高度,通常偏移=高度
您将得到以下渲染:There is the render
yruzcnhs5#
这是使用
AndroidView
的FadingEdgeLazyColumn的一个非常简单的实现。在LazyColumn的顶部和底部应用渐变背景放置AndroidView
。