抽屉式导航栏组件是一种滑入式菜单，可让用户导航到应用的各个部分。用户可以通过从侧面滑动或点按菜单图标来激活它。
请考虑以下三个实现抽屉式导航栏的用例：
- 内容整理：让用户能够在不同类别（例如新闻或博客应用）之间切换。
- 帐号管理：提供指向具有用户帐号的应用中的帐号设置和个人资料部分的快速链接。
- 功能发现：在单个菜单中整理多项功能和设置，以便用户在复杂应用中发现和访问这些功能。
在 Material Design 中，有两种类型的抽屉式导航栏：
- 标准：与其他内容共享屏幕中的空间。
- 模态：在屏幕中其他内容的顶部展示。
示例
您可以使用 ModalNavigationDrawer 可组合项实现抽屉式导航栏。
使用 drawerContent 槽来提供 ModalDrawerSheet 并提供抽屉式导航栏的内容，如以下示例所示：
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
Text("Drawer title", modifier = Modifier.padding(16.dp))
Divider()
NavigationDrawerItem(
label = { Text(text = "Drawer Item") },
selected = false,
onClick = { /*TODO*/ }
)
// ...other drawer items
}
}
) {
// Screen content
}
ModalNavigationDrawer 接受一些额外的抽屉式导航栏参数。例如，您可以使用 gesturesEnabled 参数切换抽屉式导航栏是否响应拖动，如以下示例所示：
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
// Drawer contents
}
},
gesturesEnabled = false
) {
// Screen content
}
控件行为
如需控制抽屉式导航栏的打开和关闭方式，请使用 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
}
}