为什么喷气背包合成高程剪辑我的影子？

Question

我在使用 jetpack 撰写高程渲染时遇到问题。我正在尝试在 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不支持彩色阴影/高程。Leland Richardson 在他的 YouTube 上 Compose 测试视频中谈到了这个问题。这里