如何在Jetpack Compose中实现带BottomBar的BottomSheet并传递列表项参数

你遇到的核心问题是全局层级的ModalBottomSheet无法直接获取子页面列表内的点击项数据，可通过以下两种方案实现：

方案一：通过共享ViewModel存储选中项（适合全局统一BottomSheet样式的场景） #

你当前已经在子页面注入了HomeViewModel，直接在ViewModel中新增可观察的选中项状态即可完成数据传递：

1. 在HomeViewModel中新增选中项状态

class HomeViewModel : ViewModel() {
    // 存储当前点击的待操作列表项，null表示无选中项
    var currentOperateItem by mutableStateOf<Message?>(null)
        private set

    // 暴露更新选中项的方法
    fun setCurrentOperateItem(item: Message?) {
        currentOperateItem = item
    }

    // 原有删除消息逻辑
    fun deleteMessage(messageId: String) {
        // 执行删除网络请求/本地数据库操作，更新存储的消息列表数据
    }
}

2. 修改子页面MessageItemsComposable的图标点击逻辑，点击时同步选中项到ViewModel

// 建议改为从homeViewModel读取可观察的列表状态，删除后自动刷新
val messages : List<Messages> = getMessagesFromNetwork() 

LazyColumn {
    items(messages) { message ->
    Row{
        Text(message.title)
        Icon(
            onClick = {
                // 先存选中项，再弹出BottomSheet
                homeViewModel.setCurrentOperateItem(message)
                bottomState.show()             
            }
        ) {
           //Draw the icon
        }
    }            
}

3. 修改HomeComposable中BottomSheet的逻辑，直接读取ViewModel中的选中项

fun HomeComposable(homeViewModel: HomeViewModel, 
     navController: NavHostController,
     bottomSheetState: ModalBottomSheetState, // 补充你原有的sheet状态参数
     coroutineScope: CoroutineScope // 用于控制sheet隐藏的协程作用域
) {
    ModalBottomSheetLayout(
        sheetState = bottomSheetState,
        sheetContent = {
            // 仅当有选中项时展示删除按钮，也可根据选中项类型展示不同操作
            homeViewModel.currentOperateItem?.let { currentItem ->
                Button(
                    onClick = {
                        homeViewModel.deleteMessage(currentItem.id)
                        // 操作完成后清空选中项、关闭BottomSheet
                        homeViewModel.setCurrentOperateItem(null)
                        coroutineScope.launch { bottomSheetState.hide() }
                    }
                ) {
                    Text("删除消息")
                }
            }
        }
) {
    Scaffold(
        content = { padding ->
            NavHost(
                navController = navController,
                startDestination = WHATS_NEW_COMPOSABLE,
                modifier = Modifier.padding(padding)
            ) {
                composable(MESSAGES_COMPOSABLE) {
                    MessageItemsComposable(
                        homeViewModel,
                        navController,
                        bottomSheetState
                    )
                }
                // 另外两个子页面的配置同理
            }
        }  
    )
}

方案二：将ModalBottomSheet下放到各子页面内部（适合各页面操作逻辑差异大的场景） #

不用在Home层维护全局的BottomSheet，每个子页面自己包裹ModalBottomSheet，自行维护当前选中的列表项和操作逻辑：

• 优势：各页面逻辑解耦，不需要跨层级传递数据和BottomSheet状态，后续修改单个页面的BottomSheet样式/操作不会影响其他页面
• 实现逻辑和方案一类似，只是把BottomSheet、选中项状态都放在对应子页面内部，不需要存到全局的HomeViewModel中

注意事项 #

列表数据源建议放到ViewModel中以可观察状态存储，不要在子页面本地声明val messages = getMessagesFromNetwork()，否则删除数据后列表无法自动刷新。

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