为什么jetpack compose海拔会夹住我的影子？答案

【问题标题】：Why jetpack compose elevation clip my shadow?为什么jetpack compose海拔会夹住我的影子？
【发布时间】：2020-10-10 19:36:14
【问题描述】：

我在使用 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()
}

【问题讨论】：

您是否向包含 DiscoverItem 的父可组合项添加了垂直填充？
@SaurabhThorat 是的，但是当您给组件填充时，您必须考虑其他布局间距。为什么我们需要填充该高度？例如，react native view 可以在没有填充的情况下获得提升。
为什么不用Surface的卡来代替？如果你更深入，你会看到卡片也在下面使用 Surface @Melih Berberoglu

标签： android android-jetpack-compose

【解决方案1】：

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

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

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

【讨论】：

这不是解决方案，而是解决方法。你永远不应该以这种方式解决问题。解决这个问题的正确方法是使用LazyColumn的contentPadding（检查this answer）

【解决方案2】：

我使用表面来包裹阴影卡，它给了我预期的结果。

 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

【讨论】：