導覽匣元件是滑入式選單,可讓使用者 到應用程式的不同部分使用者只要從側邊滑動即可啟用 或輕觸選單圖示。
請考慮以下三種實作導覽匣的用途:
- 內容組織:讓使用者切換不同的內容 例如新聞或網誌應用程式
- 帳戶管理:提供帳戶設定和設定檔的快速連結 透過使用者帳戶管理應用程式的專區
- 功能探索:集中管理多項功能和設定 選單則有助於使用者在複雜的應用程式中探索和存取。
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 } }