单个Compose函数（页面）中使用多个ViewModel是否符合最佳实践？

你的这种实现思路本身是合理的，符合Compose状态驱动UI的核心思想，但需要在代码组织和职责划分上注意一些细节，才能保证代码的可维护性并贴合最佳实践：

核心合理性 #

横竖屏的布局差异本质是同一页面路由下的状态/配置变化，用单个Compose函数作为入口处理不同场景的布局切换，是完全没问题的。两个ViewModel各司其职（列表逻辑、详情逻辑），只要职责边界清晰，这种用法就不违反设计原则。

需要注意的关键细节 #

• 拆分UI组件，避免函数臃肿
  不要把消息列表和详情页的所有UI逻辑都堆在同一个Compose函数里，应该拆成独立的子组件（比如MessagesList()和MessageDetail()），主函数只负责根据屏幕方向（LocalConfiguration.current.orientation）和选中消息的状态，决定是单独渲染列表、单独渲染详情，还是左右分栏渲染两者。这样主函数逻辑更清晰，子组件也能复用。

• 确保ViewModel的作用域正确

  • MessagesListViewModel绑定到当前路由的生命周期（用viewModel()获取即可），因为无论横竖屏都需要它管理列表状态。
  • MessageDetailViewModel的作用域要注意：横屏时它和列表ViewModel同属一个路由；竖屏跳转详情页时，它应绑定到详情页路由的生命周期。如果主路由同时处理这两种情况，建议用NavBackStackEntry的savedStateHandle传递选中的消息ID，让MessageDetailViewModel从中获取参数，确保配置变化时状态不丢失。

• 通过共享状态通信，避免ViewModel耦合
  两个ViewModel之间不要直接互相引用，应该通过共享的状态（比如选中的消息ID）来通信。比如主函数持有选中消息ID的状态，把它传给MessageDetailViewModel作为参数，同时监听列表ViewModel的选中事件更新这个状态。这样两个ViewModel职责完全独立，只依赖共享的状态参数。

• 避免在UI层写业务逻辑
  所有业务逻辑（比如加载消息列表、获取消息详情）都放在对应的ViewModel里，主Compose函数只做状态判断和UI组合，保持UI层的纯粹性。

示例代码结构 #

@Composable
fun MessagesMainScreen(navController: NavController) {
    val configuration = LocalConfiguration.current
    val isLandscape = configuration.orientation == Configuration.ORIENTATION_LANDSCAPE
    
    val listViewModel: MessagesListViewModel = viewModel()
    val selectedMessageId by listViewModel.selectedMessageId.collectAsState()
    
    // 根据选中状态和屏幕方向决定布局
    when {
        isLandscape -> {
            Row(modifier = Modifier.fillMaxSize()) {
                MessagesList(
                    viewModel = listViewModel,
                    modifier = Modifier.weight(1f)
                )
                selectedMessageId?.let { messageId ->
                    val detailViewModel: MessageDetailViewModel = viewModel(
                        factory = MessageDetailViewModelFactory(messageId)
                    )
                    MessageDetail(
                        viewModel = detailViewModel,
                        modifier = Modifier.weight(2f)
                    )
                } ?: EmptyDetailPlaceholder(modifier = Modifier.weight(2f))
            }
        }
        selectedMessageId != null -> {
            // 竖屏且选中消息，渲染详情
            val detailViewModel: MessageDetailViewModel = viewModel(
                factory = MessageDetailViewModelFactory(selectedMessageId!!)
            )
            MessageDetail(viewModel = detailViewModel)
        }
        else -> {
            // 竖屏未选中消息，只渲染列表
            MessagesList(viewModel = listViewModel)
        }
    }
}

// 子组件示例
@Composable
fun MessagesList(viewModel: MessagesListViewModel, modifier: Modifier = Modifier) {
    // 列表UI逻辑，调用viewModel的方法
}

@Composable
fun MessageDetail(viewModel: MessageDetailViewModel, modifier: Modifier = Modifier) {
    // 详情UI逻辑，调用viewModel的方法
}

总结来说，只要你能保持UI组件拆分清晰、ViewModel职责独立、状态管理合理，单个Compose函数使用多个ViewModel的方式完全符合最佳实践。

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