如何在Jetpack Compose切换状态时实现组合项的平滑过渡？

你的问题核心在于只给SecondState对应的Composable做了显示动画，但切换回FirstState时没有配置退出动画，导致组件突然消失。以下是两种可行的解决方案：

方案1：使用AnimatedContent实现双向过渡动画（推荐） #

AnimatedContent是Jetpack Compose专门用于内容切换的组件，能自动处理新旧状态对应Composable的过渡动画，无需手动控制可见性。

首先假设你的状态密封类定义如下：

sealed class SomeState {
    object FirstState : SomeState()
    data class SecondState(val text: String) : SomeState()
}

修改UI代码：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Button(onClick = {
        state = SomeState.FirstState
    }) {
        Text(text = "Set first state")
    }
    Button(onClick = {
        state = SomeState.SecondState("Second state text")
    }) {
        Text(text = "Set second state")
    }
}

AnimatedContent(
    targetState = state,
    modifier = Modifier.align(Alignment.CenterHorizontally),
    // 自定义过渡动画，可根据需求调整
    transitionSpec = {
        fadeIn() with fadeOut() using SizeTransform(clip = false)
    }
) { currentState ->
    when (currentState) {
        SomeState.FirstState -> {
            // FirstState对应的内容，可根据需求替换为自定义Composable
            Text(text = "First state content", fontSize = 20.sp)
        }
        is SomeState.SecondState -> {
            SecondStateText(state = currentState)
        }
    }
}

说明： #

• targetState绑定当前状态，状态变化时自动触发动画
• transitionSpec可自定义动画组合，比如淡入淡出+缩放、左右滑动等，默认是淡入淡出效果
• 通过when分支渲染对应状态的Composable，切换过程完全由框架处理过渡

方案2：给AnimatedVisibility添加退出动画 #

如果只想保留原有AnimatedVisibility的写法，只需给它配置exit参数，让SecondState的Composable在隐藏时执行平滑退出动画：

Row(
    modifier = Modifier.fillMaxWidth(),
    horizontalArrangement = Arrangement.SpaceEvenly
) {
    Button(onClick = {
        state = SomeState.FirstState
    }) {
        Text(text = "Set first state")
    }
    Button(onClick = {
        state = SomeState.SecondState("Second state text")
    }) {
        Text(text = "Set second state")
    }
}

val isSecondState = state is SomeState.SecondState
AnimatedVisibility(
    visible = isSecondState,
    modifier = Modifier.align(Alignment.CenterHorizontally),
    // 进入动画：淡入+垂直展开
    enter = fadeIn() + expandVertically(),
    // 退出动画：淡出+垂直收缩
    exit = fadeOut() + shrinkVertically()
) {
    (state as SomeState.SecondState).let {
        SecondStateText(state = it)
    }
}

说明： #

• 常用动画选项包括slideInHorizontally、slideOutHorizontally、scaleIn、scaleOut等，可自由组合
• 配置exit参数后，切换回FirstState时，SecondState的Composable会按指定动画平滑消失

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