「導覽匣」元件是滑入式選單,可讓使用者前往應用程式的各個部分。使用者可以從側邊滑動或輕觸選單圖示來啟用該元件。
實作 Navigation 導覽匣的三種用途如下:
- 內容整理:允許使用者切換不同類別,例如新聞或網誌應用程式。
- 帳戶管理:在設有使用者帳戶的應用程式中,提供帳戶設定和個人資料部分的快速連結。
- 功能探索:將多項功能和設定整理在單一選單中,方便使用者在複雜的應用程式中探索及使用。
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
建立例項。您也可以呼叫暫停函式來回應 UI 事件。
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 } }