为什么 jetpack compose elevation 剪辑我的影子？

Question

我在使用 Jetpack Compose 高度渲染时遇到问题。我正在尝试在 Surface 上添加高程，但我的 UI 似乎带有剪裁的阴影。另外，如何在 Surface 上添加彩色阴影？

截图见下图

@Composable
fun DiscoverItem() {
    Surface(
        contentColor = Color(0xFFFFFFFF),
        modifier = Modifier.preferredWidthIn(min = 145.dp).preferredHeight(56.dp),
        shape = CircleShape,
        elevation = 8.dp,
    ) {
        Row(
            modifier = Modifier.fillMaxSize().padding(horizontal = 8.dp),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Surface(
                modifier = Modifier.preferredSize(40.dp),
                shape = CircleShape,
                color = Color(0xFFFFC3D8)
            ) {
                Image(
                    imageResource(R.drawable.pin_icon),
                    modifier = Modifier.size(width = 18.dp, height = 24.dp),
                    contentScale = ContentScale.Fit
                )
            }
            Spacer(modifier = Modifier.padding(start = 10.dp))
            Text(
                "YOUR AREA",
                style = MaterialTheme.typography.body2,
                color = Color(0xFFFC1055)
            )
        }
    }
}

@Composable
@Preview
fun DiscoverItemPreview() {
    DiscoverItem()
}

Answer 1

您布局底部的内容不足。您可以添加垫片来查看您的影子。

@Composable
@Preview
fun DiscoverItemPreview() {
    Column{
    DiscoverItem()
    Spacer(modifier = Modifier.height(20.dp))
    }
}

关于彩色阴影，compose min sdk 是 Android Lollpop 和 skia 版本的 lollipop 不支持彩色 shadow/elevation。 Leland Richardson 在他关于 Compose dogfooding 的 youtube 视频中谈到了这个问题。 here

Answer 2

我用 surface 包裹阴影卡，它给了我预期的结果。

 Surface(
    elevation = 4.dp,
    color = MaterialTheme.colors.surface,
    shape = Shapes.medium,
) {
    Card(
        modifier = Modifier
            .fillMaxWidth()
            .animateContentSize(
                animationSpec = tween(
                    durationMillis = 300,
                    easing = LinearOutSlowInEasing
                )
            ),
        elevation = 8.dp,
        shape = Shapes.medium,
        onClick = {
            isExpanded = !isExpanded
        }

    ) {}}

enter image description here

为什么 jetpack compose elevation 剪辑我的影子？

Why jetpack compose elevation clip my shadow?

android

android-jetpack-compose