如何仅在元素底部添加高度？ Jetpack 撰写

Question

我想在元素的底部添加一些高度或阴影。对于此元素，我使用的是 Tab 可组合项。如何将此 elevation/shadow 添加到附件中的底部？

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

shape = 8.dp,
elevation = 6.dp

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

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

Answer 1

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

来自 Surface 文档

Material surface is the central metaphor in material design. Each surface exists at a given elevation, which influences how that piece of surface visually relates to other surfaces and how that surface is modified by tonal variance.

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

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
}

如何仅在元素底部添加高度？ Jetpack 撰写

How to add elevation just in the bottom of an element? Jetpack Compose

android

kotlin

android-jetpack-compose