抽屉式导航栏组件是一个滑入式菜单,可让用户浏览 应用的各个部分用户从侧面滑动即可激活它 或点按菜单图标
请考虑实现抽屉式导航栏的三个用例:
- 内容整理:让用户能够在 例如新闻或博客应用
- 账号管理:提供指向账号设置和个人资料的快捷链接 部分。
- 功能推介:在一项功能中整理多项功能和设置 菜单,方便用户在复杂应用中发现和访问相关内容。
在 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 } }