如何在元素底部添加高程？喷气背包组成答案

【问题标题】：How to add elevation just in the bottom of an element? Jetpack Compose如何在元素底部添加高程？喷气背包组成
【发布时间】：2022-07-19 00:33:23
【问题描述】：

我正在尝试在元素底部添加一些高程或阴影。对于这个元素，我使用 Tab 可组合。如何在附加图像的底部添加此高程/阴影？

如果你能看到，Text Field 元素周围有阴影。对于这个元素，我添加了

shape = 8.dp,
elevation = 6.dp

在 Surface 元素内。但是我不能在 Tab 可组合中使用相同的属性，此外，形状和高度会在所有组件周围添加，但我只想要“用户”和“待定用户”选项卡底部的“阴影”。

对于这个实现，我使用的是 Jetpack Compose

【问题讨论】：

标签： android kotlin android-jetpack-compose

【解决方案1】：

您应该在 Compose 中为元素添加高程和阴影的方式是使用 Surfaces 作为其他内容的容器。

来自Surface docs

材料表面是材料设计的核心隐喻。每个表面都存在于给定的高度，这会影响该表面与其他表面的视觉关联方式以及该表面如何通过色调变化进行修改。

所以要给标签布局添加阴影，你可以这样做

Surface(
    shadowElevation = 9.dp, // play with the elevation values
) {
    Column {
        TabRow(...) // your current TabRow content
    }
}

如果上面没有提供想要的阴影效果（我需要一个更强的阴影），并且因为你有一个矩形形状，你可以使用线性渐变来代替。

写一个@Composable函数来制作“影子”

@Composable
fun BottomShadow(alpha: Float = 0.1f, height: Dp = 8.dp) {
    Box(modifier = Modifier
        .fillMaxWidth()
        .height(height)
        .background(
            brush = Brush.verticalGradient(
                colors = listOf(
                    Color.Black.copy(alpha = alpha),
                    Color.Transparent,
                )
            )
        )
    )
}

然后在您现有的 Compose 布局中使用它

Column {
    TabRow(...) // your current TabRow content

    BottomShadow(alpha = .15f, height = 8.dp) // use higher alpha for a stronger shadow
}

【讨论】：

当 TabRow 本身是一个表面时，将 TabRow 包装在一个 Surface 中很奇怪，它只是不暴露海拔参数。也许应该
@darnmason 我同意，Compose 应该公开或提供开箱即用的许多东西，但它仍然没有。但是，即使使用开箱即用的 Surface 和高程参数，与 Google 的 MD3 设计套件显示的各种高程水平相比，我也无法在 Compose 中获得相同的阴影效果。
我还发现组合表面不关心它们的相邻表面并且即使它们具有相同的高度也会在它们上投下阴影，这很痛苦。这与 Android 视图相反

【解决方案2】：

您可以在 TabRow 上使用修饰符 shadow。例如，要添加默认的顶部应用栏高度，您可以这样做：

TabRow(
    modifier = modifier.shadow(AppBarDefaults.TopAppBarElevation),
    ...
)

【讨论】：