如何在jetpack compose中用BottomBar实现底部表单

Question

因此，我试图实现的是：

• 托管BottomNav Bar的家庭组合（此处使用脚手架）
• 底部导航栏与其他3个组合附加
• 3个组合中的每一个都有自己的惰性列
• 3个延迟列中的每个项目都有一个菜单图标，单击该图标会打开底部工作表

我能够通过将脚手架包含在一个ModalBottonSheetLayout中来实现以上目标，这是借助于这里的答案:Jetpack Compose Scaffold Modal Bottom Sheet Sheet

问题:

• 底部工作表的目的是显示一个菜单项，当单击该菜单项时，应将该项从lazyCol列中删除
• 所以底部工作表需要知道单击删除它的项目的详细信息

我怎样才能做到这一点？home composable没有任何关于它所托管的composable中存在的惰性列内的项目的信息。

有没有其他方法来解决这个问题？

这是我的代码：

HomeComposable.kt

fun HomeComposable(homeViewModel: HomeViewModel, 
     navController: NavHostController) {
        ModalBottomSheetLayout(
           sheetContent = {
           //get the id of the message here so it can be     
           //deleted
               Button(
                   text = "delete Message")
                   onClick = deleteMessage(message.id
               )
           }
) {
    Scaffold(
    content = {
    NavHost(navController = navController, startDestination = 
    WHATS_NEW_COMPOSABLE) {

          composable(MESSAGES_COMPOSABLE) {
            MessageItemsComposable(
                homeViewModel,
                navController,
                bottomSheetState
            )
          }
 
    }
  }  
)

MessageItemsComposable.kt

val messages : List<Messages> = getMessagesFromNetwork()

LazyColumn {
    items(messages) { message ->
    Row{
        Text(message.title)
        Icon(
            onClick = {
             bottomState.show()
             //show a bottom sheet with an option to delete                 
            }
        ) {

           //Draw the icon
           }
        }            
    }
}

Answer 1

在这种情况下，我会使用带有StateFlow的存储库。这个存储库将是一个单独的存储库，它负责维护数据和删除数据。您的可组合列表将监听状态变化，您的bottomsheet将调用delete()来删除选定的元素。

class Repository<T> {
    private val _state = MutableStateFlow<T>(initialState)
    val state: StateFlow<T> = _state

    fun delete(data: T) {
        _state.remove(data)
    }
}

可组合列表的父级应提供回调。当用户单击列表项并将该项作为参数传递时，应调用此回调。

@Composable
fun DataList(onItemClick(item: T)) {
    // list implementation with onItemCkick as onClick callback
}

调用时，您可以打开底部工作表并将项目传递给它。