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

Question

I'm trying to add some elevation or shadow just in the bottom of an element. For this element I'm using a Tab composable. How can I add this elevation/shadow just at the bottom as the image attached?

If you can see, the Text Field element has shadow around. For this element I add

shape = 8.dp,
elevation = 6.dp

Inside a Surface element. But I can't use this same attributes in a Tab composable, besides, the shape and elevation adds around all the component, but I just want the "shadow" at the bottom of the Users and Pending users tab.

For this implementation I'm using Jetpack Compose

Answer 1

The way your are supposed to add elevation and shadows to elements in Compose is using Surfaces as containers for other content.

From Surface docs

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.

So to add shadow to a tab layout you could do something like this

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

If the above does not provide the desired shadow effect (I needed a stronger shadow) and since you have a rectangular shape anyway you could use a linear gradient instead.

Write a @Composable function to make the "shadow"

@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,
                )
            )
        )
    )
}

Then use it in your existing Compose layout

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

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

Answer 2

You can use the modifier shadow on your TabRow. For example, to add the default top app bar elevation you could do:

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