抽屉式导航栏

抽屉式导航栏组件是一种滑入式菜单，可让用户导航到应用的各个部分。用户可以通过从侧边滑动或点按菜单图标来激活它。

请考虑实现抽屉式导航栏的三个用例：

• 内容整理：让用户能够在不同类别之间切换，例如在新闻或博客应用中。
• 账号管理：在支持用户账号的应用中提供指向账号设置和个人资料部分的快捷链接。
• 功能推介：在一项功能中整理多项功能和设置 菜单，方便用户在复杂应用中发现和访问相关内容。

在 Material Design 中，抽屉式导航栏有两种类型：

• 标准：与其他内容共享屏幕上的空间。
• 模态：显示在屏幕内其他内容之上。

示例

您可以使用 ModalNavigationDrawer 可组合项实现抽屉式导航栏。

使用 drawerContent 槽提供 ModalDrawerSheet 并提供 抽屉式导航栏的内容，如以下示例所示：

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer 接受一些额外的抽屉式导航栏参数。例如，您可以使用 gesturesEnabled 参数来切换抽屉式导航栏是否响应拖动，如以下示例所示：

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

控件行为

如需控制抽屉的打开和关闭方式，请使用 DrawerState。您应使用 drawerState 参数将 DrawerState 传递给 ModalNavigationDrawer。

DrawerState 可提供对 open 和 close 函数的访问权限，以及对与当前抽屉式导航栏状态相关的属性的访问权限。这些暂停 函数需要 CoroutineScope，您可以使用 rememberCoroutineScope。您也可以在 对界面事件的响应。

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt