如何搭配可空值使用AnimatedVisibility，避免退出动画直接消失

问题原因 #

该异常表现的核心逻辑冲突点在于：plates变为null时，AnimatedVisibility的visible参数变为false，本应触发退出动画，但此时content代码块中的if (plates != null)判断会直接命中else分支返回空内容，导致退出动画还没执行完成，渲染内容就已经被提前移除，自然出现了硬切的跳变效果。

解决方案 #

你只需要提前缓存最近一次非空的plates值，保证退出动画执行的全过程中，内容都能拿到有效的历史值渲染，直到动画完全结束后组件被销毁即可，示例代码如下：

// 缓存最近一次非空的plates数据，把YourPlatesType替换为你实际的plates类型
val cachedPlates = remember {
    mutableStateOf<YourPlatesType?>(null)
}.apply {
    if (plates != null) value = plates
}

AnimatedVisibility(
    visible = plates != null,
    // 可按需自定义进出动画效果，不需要也可以直接省略
    enter = fadeIn() + slideInVertically(),
    exit = fadeOut() + slideOutVertically(),
    content = {
        cachedPlates.value?.let { validPlates ->
            // 把你原来渲染plates的逻辑直接放在这里即可，不需要加else分支
        }
    }
)

补充说明 #

如果没有特殊的动画定制需求，你不需要额外修改AnimatedVisibility的默认配置，只要保证退出动画执行期间content能返回非空的渲染内容，过渡效果就会正常触发。

内容的提问来源于stack exchange，提问作者zoltish