android - 如何在jetpack compose中使用BottomBar实现底部表

Question

所以我想要实现的是：

• 一个承载 BottomNav 栏的家庭组合（此处使用脚手架）
• 底部导航栏附有 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
           }
        }            
    }
}

标签： androidandroid-jetpack-composeandroid-jetpack-compose-listjetpack-compose-navigationandroid-jetpack-compose-scaffold

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
}

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