如何在元素底部添加高程？Jetpack Compose

Question

我想为一个元素增加底部的高度或阴影。我正在使用一个标签组件来实现这个元素。如何像附图一样只在底部添加高度/阴影?

如果您能看到，文本字段元素周围有阴影。对于此元素，我添加了

shape = 8.dp,
elevation = 6.dp

在 Surface 元素中。但我无法在 Tab 组合中使用相同的属性，此外，形状和高度添加到所有组件周围，但我只想要“阴影”位于“用户”和“待处理用户”选项卡的底部。

为此实现，我正在使用 Jetpack Compose。

- cblnpa

Answer 1

在Compose中添加高程和阴影的正确方式是使用Surface作为其他内容的容器。

来自Surface文档

材料表面是材料设计中的中心隐喻。每个表面存在于特定的高程，这影响了该表面与其他表面的视觉关系以及该表面如何被色调变化所改变。

因此，要向选项卡布局添加阴影，您可以像这样操作

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
}

- Ma3x

---

将TabRow包装在Surface中时，它本身就是一个surface，这似乎有些奇怪，它只是没有暴露出elevation参数。也许应该这样。 - darnmason

@darnmason 我同意，Compose应该提供许多东西，但它仍然没有。但即使使用Surface和可用的elevation参数，我也无法在Compose中获得与Google的MD3设计套件显示的各种高程级别相同的阴影效果。 - Ma3x

我也发现组合表面不关心它们相邻的表面，即使它们具有相同的高度，它们仍会在其上投下阴影，这让人感到痛苦。这与Android视图相反。 - darnmason

Answer 2

您可以在TabRow上使用修饰符shadow。此外，添加zIndex以使阴影绘制在选项卡内容的顶部。

例如，要添加默认的顶部应用栏高度，您可以执行以下操作：

TabRow(
    modifier = modifier
         .shadow(AppBarDefaults.TopAppBarElevation)
         .zIndex(1f),
    ...
)

- cherif

---

如果所需元素不在应用栏中，为什么要使用 AppBar？ - IgorGanapolsky