如何在 jetpack compose 中使用 BottomBar 实现底部工作表

Question

所以我想要实现的是：

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

借助此处答案，我可以通过将脚手架封装在 ModalBottonSheetLayout 内来实现上述目标：Jetpack Compose Scaffold + Modal Bottom Sheet

问题：

• 底部工作表的目的是显示一个菜单项，单击该菜单项应从lazyColumn 中删除该项目
• 因此底部工作表需要知道单击以删除它的项目的详细信息

我怎样才能做到这一点？主可组合项没有有关其托管的可组合项中存在的惰性列内的项目的任何信息。

有没有不同的方法来解决这个问题？

这是我的代码：

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 的存储库。该存储库将是一个单例，它负责维护数据和删除数据。您的可组合列表将侦听状态更改，并且您的底表将调用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
}

调用时，您可以打开底页并将项目传递给它。