https://kotlinlang.org logo
Title
s

sindrenm

05/22/2023, 4:01 PM
I notice that
Arrangement.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.
Pardon the sub-par video quality, but here's a quick screencast showing what I mean. You'll notice that the very end, after animating out, there's a jump where the horizontal spacing between the
AnimatedVisibility
and the
Text
is removed.
l

Loney Chou

05/22/2023, 4:37 PM
One solution: wrap each child with a Box, and specify their
Modifier.padding
to mimic
Arrangement.spacedBy
.