sindrenm
05/22/2023, 4:01 PMArrangement.spacedBy()
doesn't play well with animating content visibility in a `Row`/`Column`.
@Preview
@Composable
fun AnimatedContentInRowPreview() {
var isIconVisible by remember { mutableStateOf(false) }
Button(onClick = { isIconVisible = !isIconVisible}) {
Row(horizontalArrangement = Arrangement.spacedBy(8.dp), verticalAlignment = Alignment.CenterVertically) {
AnimatedVisibility(isIconVisible) {
Icon(Icons.Default.Check, null, Modifier.size(16.dp), Color.White)
}
Text("Click me")
}
}
}
The issue here is that the spacing is applied immediately when isIconVisible
becomes true (but before item is visible), and removed right after the animation ends and AnimatedVisibility
“removes itself” from the content. Is there a way around this, but still using spacedBy
, or should I instead put padding on the content being animated? Putting content on the animating content works fine, but I prefer the code that spacedBy
provides.AnimatedVisibility
and the Text
is removed.Loney Chou
05/22/2023, 4:37 PMModifier.padding
to mimic Arrangement.spacedBy
.