AspectRatioBox
fun AspectRatioBox(aspectRatio: SkapaAspectRatio, modifier: Modifier = Modifier, contentAlignment: Alignment = Alignment.Center, propagateMinConstraints: Boolean = false, background: Color = SkapaTheme.colors.neutral2, content: @Composable BoxScope.() -> Unit)(source)
A wrap box container for presenting visual media, in Skapa standardised aspect ratios
Example of usage
This function uses Coil to create a Skapa Image Component using SkapaImage object
import coil.compose.AsyncImagePainter
import coil.compose.rememberAsyncImagePainter
import coil.request.ImageRequest
import net.ikea.skapa.ui.components.AspectRatioBox
import net.ikea.skapa.ui.components.SkapaAspectRatio
import net.ikea.skapa.ui.components.SkapaImage
@Composable
@OptIn(ExperimentalSkapaApi::class)
private fun SkapaImageCoilWrapper(imgUrl: String?) {
val painter = rememberAsyncImagePainter(
model = ImageRequest.Builder(LocalContext.current)
.data(imgUrl)
.error(SkapaImage.Error)
.fallback(SkapaImage.Fallback)
.build()
)
val aspectRatioModifier =
if (painter.state is AsyncImagePainter.State.Success) Modifier.aspectRatio(SkapaAspectRatio.Ratio16by9.value) else Modifier
AspectRatioBox(
aspectRatio = SkapaAspectRatio.Ratio16by9,
) {
Image(
painter = painter,
contentScale = ContentScale.Crop,
contentDescription = "coil",
modifier = Modifier
.align(Alignment.Center)
.then(aspectRatioModifier)
)
}Content copied to clipboard
Parameters
aspectRatio
The aspect ratio you want to box the content with.
modifier
Modifier to be applied to the AspectRatioBox.
contentAlignment
The alignment of the content inside the AspectRatioBox. The default is Alignment.Center.
propagateMinConstraints
Whether the incoming min constraints should be passed to content.
background
The background color of the AspectRatioBox. Default is SkapaTheme.colors.neutral2.
content
The content of the AspectRatioBox.