嘿，这个场景我太熟了！其实你已经找对了方向（用Kotlin协程的delay），但差了关键的一步——Compose是状态驱动的UI框架，不能像传统View系统那样直接在协程里“调用”可组合函数，得通过状态变化来触发UI的切换。

核心思路 #

我们只需要三步就能实现：

1. 定义一个状态变量来标记当前应该显示哪个UI（动画还是导航栏）
2. 用LaunchedEffect启动一个协程，在延迟30秒后更新这个状态
3. 最后根据状态变量的取值，决定渲染动画组件还是导航栏组件

具体代码示例 #

先看完整实现，我再给你拆解说细节：

@Composable
fun SplashScreen() {
    // 定义状态：标记动画是否已完成（初始为false，优先显示动画）
    var isAnimationFinished by remember { mutableStateOf(false) }

    // 启动一个仅执行一次的协程（key用Unit，只在Composable首次组合时启动）
    LaunchedEffect(key1 = Unit) {
        // 延迟30秒（单位是毫秒，30*1000=30000）
        delay(30000L)
        // 延迟结束后更新状态，自动触发UI重组
        isAnimationFinished = true
    }

    // 根据状态切换显示的UI
    if (isAnimationFinished) {
        // 显示你的导航栏组件
        AppNavBar()
    } else {
        // 显示启动动画组件
        LaunchAnimation()
    }
}

// 你的启动动画组件示例（替换成你自己的动画实现即可）
@Composable
fun LaunchAnimation() {
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        Text(text = "正在加载启动动画...", fontSize = 24.sp)
        // 这里可以替换成Lottie动画、Compose自带的animate*AsState动画等
    }
}

// 你的导航栏组件示例
@Composable
fun AppNavBar() {
    BottomAppBar {
        Text(text = "首页", modifier = Modifier.weight(1f).padding(16.dp))
        Text(text = "我的", modifier = Modifier.weight(1f).padding(16.dp))
        // 其他导航项...
    }
}

关键细节拆解 #

• remember + mutableStateOf：这是Compose状态管理的基础，remember确保状态在UI重组时不会丢失，mutableStateOf会在值变化时自动触发UI刷新。
• LaunchedEffect：这是Compose专门用来执行协程副作用的API，它会在Composable进入组合时启动协程，当key变化或Composable退出组合时自动取消协程。这里用Unit作为key，意味着协程只会在首次加载时启动一次，不会重复执行。
• 为什么不能直接在协程里调用Composable？：因为Composable必须在Compose的UI上下文（CompositionLocalProvider提供的环境）中执行，直接在协程里调用会脱离这个上下文，导致渲染异常。而状态驱动的方式，所有UI渲染都在正确的上下文里执行，完全符合Compose的设计规范。

可选优化点 #

• 如果你的启动动画本身有“播放完成”的回调（比如Lottie动画的结束监听），可以把delay替换成等待动画完成的逻辑，同时保留状态驱动的模式，这样更灵活。
• 想要支持用户手动跳过动画？给动画组件加个点击事件，直接把isAnimationFinished设为true就行，完全不影响原有逻辑。
• 担心协程泄漏？完全不用怕——LaunchedEffect会在Composable退出组合时自动取消协程，比如用户在30秒内退出了这个页面，协程会被自动终止，不会有内存泄漏问题。

这个方案是Compose的标准写法，兼容性拉满，完全适配你的需求～