英文:
Row with weights in Jetpack Compose with AnimatedVisibility brakes the UI
问题
尝试在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))
}
}
似乎同时进行可见性和大小更改可能会破坏UI。
是否有一种方法可以实现平滑动画，而不需要实现非常自定义的动画？
英文:
Trying to achieve 3 items in row equally distributed horizontally with option to show/hide some of them in compose v1.3.3.
If it's a simple if statement to include view in compose all works fine (without animation)
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))
}
}
As soon as item wrapped with AnimatedVisibility as condition UI becomes broken.
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))
}
}
Seems like visibility + size changes same time could ruin the UI.
Is there a way for smooth animation without implementing very custom ones?
答案1
得分: 6
在这里的问题是，权重修改器应该放在行的直接子元素上。
在第二种情况下，使用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")
}
}
英文:
The problem here is that the weight modifier should be on the direct childs of row.
In the second case using AnimatedVisibility you should use modifier on AnimatedVisibility and not on Text anymore.
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")
}
}
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论