Jetpack Compose多模块应用中动态UI与点击事件传递方案问询

1. 从UI生成模块返回动态Composable #

Jetpack Compose的UI本质是Composable函数，你可以直接在UI模块中定义公开的Composable函数，接收API返回的UI数据作为参数，主应用只需调用这个函数即可渲染动态UI。

示例：

• UI模块中的代码：

// UI模块暴露的公开Composable
@Composable
fun DynamicScreen(uiData: UiComponentData, onComponentAction: (ComponentAction) -> Unit) {
    Column {
        uiData.components.forEach { component ->
            when (component.type) {
                "button" -> {
                    Button(onClick = {
                        onComponentAction(ComponentAction.ButtonClicked(component.id))
                    }) {
                        Text(component.label ?: "")
                    }
                }
                "text" -> Text(component.content ?: "")
                "image" -> Image(
                    painter = rememberAsyncImagePainter(component.imageUrl),
                    contentDescription = null
                )
                // 其他组件类型的处理逻辑
            }
        }
    }
}

// 用密封类定义组件操作事件，区分不同交互类型
sealed class ComponentAction {
    data class ButtonClicked(val componentId: String) : ComponentAction()
    data class ListItemSelected(val itemId: String) : ComponentAction()
    data class NavigateToScreen(val targetScreenId: String) : ComponentAction()
}

// 共享的UI数据模型（可放在公共基础模块，避免重复定义）
data class UiComponentData(
    val screenId: String,
    val components: List<UiComponent>
)

data class UiComponent(
    val id: String,
    val type: String,
    val label: String? = null,
    val content: String? = null,
    val imageUrl: String? = null
)

• 主应用中的调用：

@Composable
fun MainHostScreen(apiUiData: UiComponentData) {
    DynamicScreen(
        uiData = apiUiData,
        onComponentAction = { action ->
            // 主应用内处理具体交互逻辑
            when (action) {
                is ComponentAction.ButtonClicked -> {
                    // 比如触发API请求、显示弹窗等
                    println("按钮 ${action.componentId} 被点击")
                }
                is ComponentAction.NavigateToScreen -> {
                    // 结合Jetpack Navigation跳转到对应屏幕
                    navController.navigate("dynamic_screen/${action.targetScreenId}")
                }
            }
        }
    )
}

2. 多屏场景的处理 #

如果API返回多屏UI数据，可结合主应用的导航系统实现：

• 在UI模块中保留单屏渲染的Composable，主应用根据当前导航状态传入对应屏的UI数据
• 用Jetpack Navigation把每个动态屏定义为独立目的地，导航时通过参数传递屏幕ID或直接传递UI数据

示例（结合Navigation）：

// 主应用导航图配置
navGraphBuilder.apply {
    composable(
        route = "dynamic_screen/{screenId}",
        arguments = listOf(navArgument("screenId") { type = NavType.StringType })
    ) { backStackEntry ->
        val screenId = backStackEntry.arguments?.getString("screenId") ?: ""
        val uiData = fetchUiDataFromApi(screenId) // 从API获取对应屏的数据
        DynamicScreen(
            uiData = uiData,
            onComponentAction = { action ->
                if (action is ComponentAction.NavigateToScreen) {
                    navController.navigate("dynamic_screen/${action.targetScreenId}")
                }
            }
        )
    }
}

核心原则 #

• UI模块只负责根据数据渲染UI和触发事件回调，所有业务逻辑（如交互后的处理、导航）由主应用实现
• 用密封类定义事件类型，避免回调逻辑混乱，同时保证类型安全
• UI数据模型和事件类建议放在公共基础模块，让UI模块和主应用共享，避免重复编码

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