Compose中如何通过屏幕级IconButton触发嵌套Composable的ViewModel方法？

一、顶部保存按钮触发当前页面ViewModel执行保存逻辑 #

这里提供两种可行方案，根据页面数量和复杂度选择：

方案1：基于SharedFlow的事件通知（适合多页面场景） #

这种方式不需要在顶层持有所有ViewModel，通过事件流通知当前活跃页面的ViewModel执行保存。

1. 定义全局事件流
   在顶层（比如Application类或Compose父组件）创建保存事件触发器：

val saveTrigger = MutableSharedFlow<Unit>(replay = 0)

2. ViewModel实现保存逻辑并监听事件
   每个页面的ViewModel实现保存逻辑，仅在页面活跃时响应事件：

class HomeViewModel(
    private val saveTrigger: SharedFlow<Unit>,
    private val pageLifecycle: Lifecycle
) : ViewModel() {

    init {
        viewModelScope.launch {
            saveTrigger.collect {
                // 仅当页面处于活跃状态时执行保存
                if (pageLifecycle.currentState.isAtLeast(Lifecycle.State.RESUMED)) {
                    saveCurrentData()
                }
            }
        }
    }

    private fun saveCurrentData() {
        // 当前页面的保存逻辑
    }
}

3. 自定义ViewModel工厂注入依赖
   创建工厂类，给ViewModel传入事件流和页面生命周期：

class HomeViewModelFactory(
    private val saveTrigger: SharedFlow<Unit>,
    private val pageLifecycle: Lifecycle
) : ViewModelProvider.Factory {
    @Suppress("UNCHECKED_CAST")
    override fun <T : ViewModel> create(modelClass: Class<T>): T {
        return HomeViewModel(saveTrigger, pageLifecycle) as T
    }
}

4. 在NavHost中创建ViewModel
   在每个页面的composable块中通过自定义工厂创建ViewModel：

NavHost(navController = navController, startDestination = "home") {
    composable("home") { backStackEntry ->
        val viewModel = ViewModelProvider(
            backStackEntry,
            HomeViewModelFactory(saveTrigger, backStackEntry.lifecycle)
        )[HomeViewModel::class.java]
        HomeScreen(viewModel)
    }
    // 其他页面重复上述逻辑，替换对应ViewModel和工厂
}

5. 顶部按钮触发事件
   在CenterAlignedTopAppBar的actions中设置按钮，点击时发送事件：

CenterAlignedTopAppBar(
    title = { Text("我的应用") },
    actions = {
        val coroutineScope = rememberCoroutineScope()
        IconButton(
            onClick = {
                coroutineScope.launch {
                    saveTrigger.emit(Unit)
                }
            }
        ) {
            Icon(Icons.Filled.Save, contentDescription = "保存")
        }
    }
)

方案2：基于NavController直接获取当前ViewModel（适合少页面场景） #

通过NavController获取当前页面的BackStackEntry，直接调用ViewModel的保存方法，需要每个ViewModel实现统一接口。

1. 定义统一保存接口

interface Saveable {
    fun save()
}

2. ViewModel实现接口

class HomeViewModel : ViewModel(), Saveable {
    override fun save() {
        // 当前页面的保存逻辑
    }
}

class ProfileViewModel : ViewModel(), Saveable {
    override fun save() {
        // 另一个页面的保存逻辑
    }
}

3. 顶部按钮直接调用保存方法
   点击按钮时，通过NavController获取当前ViewModel并执行保存：

IconButton(
    onClick = {
        navController.currentBackStackEntry?.let { entry ->
            when (entry.destination.route) {
                "home" -> {
                    val viewModel = ViewModelProvider(entry)[HomeViewModel::class.java]
                    viewModel.save()
                }
                "profile" -> {
                    val viewModel = ViewModelProvider(entry)[ProfileViewModel::class.java]
                    viewModel.save()
                }
                // 其他页面依次添加分支
            }
        }
    }
) {
    Icon(Icons.Filled.Save, contentDescription = "保存")
}

二、Compose中实现类似Fragment向Activity提供菜单项的功能 #

通过CompositionLocal实现页面自主控制顶部工具栏操作按钮，完全对应旧View系统的逻辑：

1. 定义CompositionLocal
   创建传递工具栏操作的CompositionLocal：

val LocalToolbarActions = compositionLocalOf<@Composable () -> Unit> { {} }

2. 顶层Scaffold中使用CompositionLocal
   在CenterAlignedTopAppBar的actions中引用这个Local：

Scaffold(
    topBar = {
        CenterAlignedTopAppBar(
            title = { Text("我的应用") },
            actions = {
                // 显示当前页面提供的工具栏操作
                LocalToolbarActions.current()
            }
        )
    },
    content = { paddingValues ->
        // 初始设置空工具栏操作
        CompositionLocalProvider(LocalToolbarActions provides {}) {
            NavHost(
                navController = navController,
                startDestination = "home",
                modifier = Modifier.padding(paddingValues)
            ) {
                composable("home") {
                    // 首页自定义工具栏操作
                    CompositionLocalProvider(
                        LocalToolbarActions provides {
                            IconButton(onClick = { /* 搜索逻辑 */ }) {
                                Icon(Icons.Filled.Search, contentDescription = "搜索")
                            }
                        }
                    ) {
                        HomeScreen()
                    }
                }
                composable("profile") {
                    // 个人页自定义工具栏操作
                    CompositionLocalProvider(
                        LocalToolbarActions provides {
                            IconButton(onClick = { /* 编辑逻辑 */ }) {
                                Icon(Icons.Filled.Edit, contentDescription = "编辑")
                            }
                            IconButton(onClick = { /* 分享逻辑 */ }) {
                                Icon(Icons.Filled.Share, contentDescription = "分享")
                            }
                        }
                    ) {
                        ProfileScreen()
                    }
                }
            }
        }
    }
)

切换页面时，顶部工具栏操作会自动切换为当前页面提供的内容，完全由页面自主控制，无需顶层维护分支逻辑。

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