MultipleElevation.kt

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.MaterialTheme
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.tooling.preview.PreviewParameter
import androidx.compose.ui.tooling.preview.PreviewParameterProvider
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val shadow1 = Color(0x262C353B)
val shadow2 = Color(0x4D2C353B)

@Composable
fun MultipleElevation(elevation: List<Elevation>) {
    Box(
        modifier = Modifier
            .size(150.dp)
            .background(MaterialTheme.colorScheme.background),
        contentAlignment = Alignment.Center
    ) {
        Box(modifier = elevation
            .fold(Modifier as Modifier) { modifier, e ->
                modifier.shadow(
                    elevation = e.elevation,
                    shape = RoundedCornerShape(e.radius),
                    spotColor = e.spotColor,
                    ambientColor = e.ambientColor,
                    clip = false
                )
            }
            .size(100.dp)
            .background(color = MaterialTheme.colorScheme.surface, shape = RoundedCornerShape(size = 16.dp))
        ) {
        }
    }
}

data class Elevation(
    val elevation: Dp,
    val radius: Dp,
    val spotColor: Color,
    val ambientColor: Color
)

private class ElevationProvider : PreviewParameterProvider<List<Elevation>> {
    override val values = sequenceOf(
        listOf(
            Elevation(3.dp, 16.dp, shadow1, shadow2),
            Elevation(2.dp, 16.dp, shadow1, shadow2)
        ),
        listOf(
            Elevation(6.dp, 16.dp, shadow1, shadow2),
            Elevation(2.dp, 16.dp, shadow1, shadow2)
        ),
        listOf(
            Elevation(3.dp, 16.dp, shadow1, shadow2),
            Elevation(8.dp, 16.dp, shadow1, shadow2)
        )
    )
}

@Composable
@Preview(showBackground = true)
fun TestPreview(@PreviewParameter(ElevationProvider::class) elevation: List<Elevation>) {
    MaterialTheme {
        MultipleElevation(elevation)
    }
}

preview0.png

preview1.png

preview2.png