Jetpack Compose 中带有权重的行，使用 AnimatedVisibility 会破坏用户界面。

Question

在Compose v1.3.3中，尝试实现水平等间距分布的三个项目，并具有显示/隐藏其中一些选项。

如果使用简单的if语句在Compose中包含视图，则所有功能都正常（没有动画）。

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))
    }
}

似乎可见性和大小同时更改可能会破坏用户界面。

有没有一种平滑动画的方法，而不需要实现非常定制化的动画？

- dilix

Answer 1

这里的问题在于权重修饰符应该放在行的直接子元素上。

在使用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")
        }
    }

- Dinamots