如何在Jetpack Compose中动态inflate Composable可组合项？

Compose 作为声明式UI框架，没有提供和XML开发中LayoutInflater.inflate对应的命令式动态加载组件API，所有UI的新增、移除、显隐都由状态驱动，完全可以实现你要的事件触发加载动画组件、延迟自动移除的效果。

核心思路 #

摒弃命令式操作UI的思路，用状态驱动UI变化：

• 维护一个可观察的状态列表，存放所有当前需要显示的效果项数据
• 监听到触发事件时，往列表中新增一条对应的数据
• UI层遍历列表，为每条数据渲染对应的可组合项
• 组件内部处理入场动画，到达指定时长后触发出场动画，动画结束后把对应数据从列表移除，对应节点自动重组消失

完整实现代码 #

1. 定义效果项数据结构 #

给每个动态添加的组件加唯一标识，方便后续定位移除：

data class NumberEffect(
    val id: Long = System.nanoTime(),
    val number: Int
)

2. ViewModel层维护状态 #

事件触发时只更新状态，不直接操作UI：

class DemoViewModel : ViewModel() {
    // 原有的数字效果触发事件流
    val createNumberEffectEvent = MutableSharedFlow<Int>()

    // 可观察的当前显示效果列表
    private val _activeEffects = MutableStateFlow<List<NumberEffect>>(emptyList())
    val activeEffects: StateFlow<List<NumberEffect>> = _activeEffects.asStateFlow()

    init {
        viewModelScope.launch {
            createNumberEffectEvent.collect { number ->
                _activeEffects.update { it + NumberEffect(number = number) }
            }
        }
    }

    // 动画结束后调用，移除对应效果项
    fun removeEffect(effectId: Long) {
        _activeEffects.update { list ->
            list.filterNot { it.id == effectId }
        }
    }
}

3. Compose页面渲染逻辑 #

收集状态渲染组件，通过AnimatedVisibility实现出入场动画，自动控制生命周期：

@Composable
fun DemoPage(viewModel: DemoViewModel = viewModel()) {
    val activeEffects by viewModel.activeEffects.collectAsStateWithLifecycle()

    Box(modifier = Modifier.fillMaxSize()) {
        // 页面原有固定内容放在此处
        // ...

        // 遍历渲染所有动态效果
        activeEffects.forEach { effect ->
            key(effect.id) { // 加key避免重组时组件错位
                var visible by remember { mutableStateOf(false) }
                LaunchedEffect(Unit) {
                    visible = true // 触发入场动画
                    delay(3000) // 停留3秒
                    visible = false // 触发出场动画
                    delay(300) // 等待出场动画播放完成
                    viewModel.removeEffect(effect.id) // 移除数据，节点消失
                }

                AnimatedVisibility(
                    visible = visible,
                    enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
                    exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut(),
                    modifier = Modifier.align(Alignment.Center) // 可自行调整组件显示位置
                ) {
                    // 替换成你自己的自定义可组合项
                    CustomAnimationText(text = "create number: ${effect.number}")
                }
            }
        }
    }
}

简化写法（无需ViewModel托管状态） #

如果不需要在配置变更（比如屏幕旋转）后保留动态组件，可以直接在Composable内部维护状态列表，代码更简洁：

@Composable
fun DemoPage() {
    val viewModel: DemoViewModel = viewModel()
    val activeEffects = remember { mutableStateListOf<NumberEffect>() }

    LaunchedEffect(Unit) {
        viewModel.createNumberEffectEvent.collect { number ->
            activeEffects.add(NumberEffect(number = number))
        }
    }

    Box(modifier = Modifier.fillMaxSize()) {
        // 页面原有内容
        // ...

        activeEffects.forEach { effect ->
            key(effect.id) {
                var visible by remember { mutableStateOf(false) }
                LaunchedEffect(Unit) {
                    visible = true
                    delay(3000)
                    visible = false
                    delay(300)
                    activeEffects.removeIf { it.id == effect.id }
                }

                AnimatedVisibility(
                    visible = visible,
                    enter = slideInVertically(initialOffsetY = { it }) + fadeIn(),
                    exit = slideOutVertically(targetOffsetY = { -it }) + fadeOut(),
                    modifier = Modifier.align(Alignment.Center)
                ) {
                    CustomAnimationText(text = "create number: ${effect.number}")
                }
            }
        }
    }
}

这种实现方式完全符合Compose的设计规范，不会出现传统View开发中常见的View引用泄漏、动画内存泄漏问题，实现堆叠飘字、连续弹窗这类需求时比XML视图写法更简单。

内容的提问来源于stack exchange，提问作者Holy-Knight