[英]Shadow clipping in LazyColumn/LazyRow
The shadow is clipping in a very odd way when it's overlapping other items in a LazyRow
and I can't figure out why.当阴影与
LazyRow
中的其他项目重叠时,它以一种非常奇怪的方式剪裁,我不明白为什么。 I'm running this code on TV emulator but I can't imagine that would make any difference.我在电视模拟器上运行这段代码,但我无法想象这会有什么不同。
val colors = listOf(
Color.Red,
Color.Blue,
Color.Green,
Color.Yellow
)
@Composable
fun ListTest() {
LazyColumn {
items(30) {
Column {
Text("This is row $it")
LazyRow {
items(colors) {
var isFocused by remember { mutableStateOf(false) }
val alpha = if (isFocused) 1f else 0.25f
val elevation = if (isFocused) 40.dp else 0.dp
Surface(
shape = RoundedCornerShape(8.dp),
color = it.copy(alpha = alpha),
modifier = Modifier
.width(240.dp)
.height(150.dp)
.padding(start = 16.dp)
// 🔴 Look here
.shadow(elevation)
.onFocusChanged { state ->
isFocused = state.isFocused
}
.focusable(),
) {
// Content here
}
}
}
}
}
}
}
I was referred to these lines in the Android code that limits elevation to 30.dp .我在 Android 代码中提到了这些行,该代码将海拔高度限制为30.dp 。
val colors = listOf(
Color.Red,
Color.Blue,
Color.Green,
Color.Yellow
)
@Composable
fun ListTest() {
LazyColumn {
items(30) {
Column {
Text("This is row $it")
LazyRow {
items(colors) {
var isFocused by remember { mutableStateOf(false) }
val alpha = if (isFocused) 1f else 0.25f
val shadowColor = if (isFocused) Color.Black else Color.Transparent
Surface(
shape = RoundedCornerShape(8.dp),
color = it.copy(alpha = alpha),
modifier = Modifier
.width(240.dp)
.height(150.dp)
.padding(start = 16.dp)
// 🔴 Look here
.coloredShadow(shadowColor)
.onFocusChanged { state ->
isFocused = state.isFocused
}
.focusable(),
) {
// Content here
}
}
}
}
}
}
}
fun Modifier.coloredShadow(color: Color) = drawBehind {
val shadowColor = color.toArgb()
val transparentColor = color.copy(alpha = 0f).toArgb()
val offsetX = 0.dp
val offsetY = 8.dp
val cornerRadius = 4.dp
drawIntoCanvas {
val paint = Paint()
val frameworkPaint = paint.asFrameworkPaint()
frameworkPaint.color = transparentColor
frameworkPaint.setShadowLayer(
// 🔴 Set to 400.dp as radius
400.dp.toPx(),
offsetX.toPx(),
offsetY.toPx(),
shadowColor
)
it.drawRoundRect(
0f,
0f,
this.size.width,
this.size.height,
cornerRadius.toPx(),
cornerRadius.toPx(),
paint
)
}
}
How can I get rid of this clipping issue?我怎样才能摆脱这个剪辑问题?
I don't think it's a clipping issue.我不认为这是剪辑问题。 You just have the elevation set too high, so the surface's shadow has to reach across another row/column, and display on top of another Surface, but because they're not children of the same view, it's not processing the shadow blurring properly.
您只是将高度设置得太高,所以表面的阴影必须跨越另一行/列,并显示在另一个表面的顶部,但因为它们不是同一视图的子级,所以它无法正确处理阴影模糊。
Maybe you should try setting the elevation to 30dp or 24dp?也许您应该尝试将高度设置为 30dp 或 24dp?
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.