Jetpack Compose 重组动画

Question

有没有什么简单的方法可以让 Composable 出现/隐藏？ 我尝试使用 AnimatedVisibility 和 AnimatedContent 来实现这一点，但在我的特定情况下，它看起来相当麻烦。 屏幕上的内容是动态的，取决于变量的值，当改变这个变量时，我需要用动画显示/隐藏对应的 Composables。

contentType.forEach { type ->
                when (type) {
                    ContentType.Type1 -> {
                        ComposableForType1()
                    }
                    ContentType.Type2 -> {
                        ComposableForType2()
                    }
                    ContentType.Type3 -> {
                        ComposableForType3()
                    }
                    ContentType.Type4 -> {
                        ComposableForType4()
                    }
                }
}
// Some logic to change the content type

Answer 1

您可以使用AnimatedVisibility 显示/隐藏一个特定视图。

如果您想在不同视图之间为某些状态设置动画，可以使用Crossfade 动画：

Crossfade(targetState = type) { type ->
    when (type) {
        ContentType.Type1 -> {
            ComposableForType1()
        }
        ContentType.Type2 -> {
            ComposableForType2()
        }
        ContentType.Type3 -> {
            ComposableForType3()
        }
        ContentType.Type4 -> {
            ComposableForType4()
        }
    }
}

如果type是一个普通的可变值，这个方法肯定会起作用。

我不确定它是否适用于您的情况，因为您还有一组数据。如果只更改数组中的值，Crossade 会起作用，但如果同时添加或删除元素，则此动画将难以实现。

在documentation中查看更多关于 Compose 动画的信息