What is it?
@Composable
inline fun Box(
modifier: Modifier = Modifier,
contentAlignment: Alignment = Alignment.TopStart,
propagateMinConstraints: Boolean = false,
content: @Composable BoxScope.() -> Unit
): Unit- As per the Box’s definition
propagateMinConstraintsis of typeBooleanand the default is set tofalse
What does it do?
- It allows specifying whether or not incoming
minimum constraintsshould be passed toBox'scontent.
SubcomposeAsyncImage
- It's a composable function that COIL provides us to load images 🌉asynchronously.
- You can see the
code🧑💻 👩💻 of thisfunctionhere 👇
- Magic 🪄 is happening at line 132
Box(
modifier = modifier,
contentAlignment = alignment,
propagateMinConstraints = true // passed as true
) {- SubcomposeAsyncImage — Internally it uses Box and sets the
propagateMinConstraints = truewhich means it forces minimum constraints on its direct child.
For the loading state, we want to show the CircularProgressIndicator and it fills the whole space, which is not the desired behavior 🛑
SubcomposeAsyncImage(
model = imageModel,
contentDescription = null,
loading = {
// Here it is a direct child and consuming the constraint of parent
// and ended-up with height = 200 dp and width = fillMaxWidth
CircularProgressIndicator()
},
modifier = Modifier
.height(200.dp)
.fillMaxWidth()
)Result
Fix
- It's really quick and easy
- The CircularProgressIndicator should be wrapped in a
composableand aligned to the center 🎉
SubcomposeAsyncImage(
model = null,
contentDescription = null,
modifier = Modifier
.height(Dimens.onePagerHeaderImageHeight)
.fillMaxWidth(),
content = {
Box(contentAlignment = Alignment.Center) {
CircularProgressIndicator(1f, color = Color.Blue)
}
}
)Result
