使用 Navigation Compose 时，Scaffold 中的 Modal drawers 和 modal navigation drawer 应该选哪个？

Question

我已阅读article。

我知道模态导航抽屉有两种实现方式，一种是模态抽屉，另一种是模态导航抽屉 脚手架.

我希望在我的项目中使用Navigation Compose，我找到了示例project来学习。

目前示例项目作者使用代码A实现了模态导航抽屉

我不知道代码 B 是否可以做同样的工作，你能告诉我吗？

代码A

@Composable
fun TodoNavGraph(
    ...
) {
    NavHost(
       ...
    ) {
        composable(
            TodoDestinations.TASKS_ROUTE,
            arguments = listOf(... )
        ) { entry ->
            AppModalDrawer(...) {
                TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }
        }
        composable(TodoDestinations.STATISTICS_ROUTE) {
            AppModalDrawer(...) {
                StatisticsScreen(...)
            }
        }
        
    }
}

@Composable
fun AppModalDrawer(
    ...       
) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            AppDrawer( ...)
        }
    ) {
        content()
    }
}

@Composable
private fun AppDrawer(...){
   ...
}


@Composable
fun TasksScreen(
   ...
) {
    Scaffold(
       ...
    ) { 
        ...
    }
}

代码B

@Composable
fun TodoNavGraph(
    ...
) {
    NavHost(
       ...
    ) {
        composable(
            TodoDestinations.TASKS_ROUTE,
            arguments = listOf(... )
        ) { entry ->
              TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...,
                    AppDrawer(...)
              )            
        }
        composable(TodoDestinations.STATISTICS_ROUTE) {
             StatisticsScreen(..., AppDrawer(...) )
           
        }
        
    }
}



@Composable
fun TasksScreen(
   ...
   AppDrawer: @Composable () -> Unit
) {
    Scaffold(
        ...,
        drawerContent = { AppDrawer(...) }
    ) { 
        ...
    }
}


@Composable
private fun AppDrawer(... ){
   ...
}

Answer 1

关于在模态抽屉和模态导航抽屉之间进行选择的答案。我的建议是模态导航抽屉，因为脚手架有一个选项，它让我们的生活变得不那么容易。但这也取决于您的用例。

第二个答案，不一样。在“代码 A”中，我们基本上是从“TodoNavGraph()”调用“fun AppDrawer()”-

{ entry ->
            AppModalDrawer(...) { // here calling AppModalDrawer()
                TasksScreen(
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }
        }

@Composable
fun AppModalDrawer(
    ...       
) {
    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            AppDrawer( ...) // at last the fun AppDrawer()
        }
    ) {
        content()
    }
}

@Composable
private fun AppDrawer(...){
   ...
}

依次从“AppDrawer()”打开“TaskScreen”-

AppModalDrawer(...) {
                TasksScreen( // calling TaskScreen()
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...
                )
            }

@Composable
fun TasksScreen(
   ...
) {
    Scaffold(
       ...
    ) { 
        ...
    }
}

而在“代码 B”中，“TaskScreen”首先在“TodoNavGraph()”中调用，后者又调用“AppDrawer()”-

{ entry ->
              TasksScreen(           // first TaskScreen()
                    userMessage = entry.arguments?.getInt(USER_MESSAGE_ARG)!!,
                    ...,
                    AppDrawer(...)    // then it calls the AppDrawer()
              )            
        }

@Composable
fun TasksScreen(
   ...
   AppDrawer: @Composable () -> Unit
) {
    Scaffold(
        ...,
        drawerContent = { AppDrawer(...) }
    ) { 
        ...
    }
}


@Composable
private fun AppDrawer(... ){
   ...
}

所以顺序颠倒了，因此两种情况下的行为都会不同。

希望对您有所帮助。

使用 Navigation Compose 时，Scaffold 中的 Modal drawers 和 modal navigation drawer 应该选哪个？

Which one should I choose between Modal drawers and modal navigation drawer in Scaffold when I use Navigation Compose?

android

kotlin

android-jetpack-compose