如何在元素的底部添加标高？Jetpack 组合

Question

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

如果您可以看到，文本字段元素周围有阴影。对于这个元素我添加

shape = 8.dp,
elevation = 6.dp

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

对于此实现，我使用 Jetpack Compose

Answer 1

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

来自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
}

Answer 2

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

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

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