Jetpack Compose 中带有 AnimatedVisibility 的权重行会阻碍 UI

Question

尝试在行中实现 3 个项目水平均匀分布，并可以选择在 compose v1.3.3 中显示/隐藏其中一些项目。

如果这是一个简单的 if 语句来在撰写中包含视图，则一切正常（没有动画）

Row(
    modifier = modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "abc", modifier = modifier.weight(1f))
    if (false) {
        Text(text = "def", modifier = modifier.weight(1f))
    }
    if(true) {
        Text(text = "zxc", modifier = modifier.weight(1f))
    }
}

一旦用 AnimatedVisibility 包裹的项目作为条件 UI 就会损坏。

Row(
    modifier = modifier.fillMaxWidth(),
    verticalAlignment = Alignment.CenterVertically
) {
    Text(text = "abc", modifier = modifier.weight(1f))
    AnimatedVisibility(visible = false) {
        Text(text = "def", modifier = modifier.weight(1f))
    }
    AnimatedVisibility(visible = true) {
        Text(text = "zxc", modifier = modifier.weight(1f))
    }
}

看起来可见性+大小同时改变可能会破坏用户界面。

有没有一种方法可以在不实现非常自定义的情况下实现流畅的动画？

Answer 1

这里的问题是权重修饰符应该位于 row 的直接子级上。

在使用 AnimatedVisibility 的第二种情况下，您应该在 AnimatedVisibility 上使用修饰符，而不是在 Text 上使用。

    Row(
        modifier = Modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = "abc", modifier = Modifier.weight(1f))
        AnimatedVisibility(visible = false, modifier = Modifier.weight(1f)) {
            Text(text = "def")
        }
        AnimatedVisibility(visible = true, modifier = Modifier.weight(1f)) {
            Text(text = "zxc")
        }
    }