ナビゲーション ドロワー コンポーネントは、ユーザーがアプリのさまざまなセクションに移動できるスライドイン メニューです。ユーザーは、横からスワイプするか、メニュー アイコンをタップして、このコンポーネントを有効にできます。
ナビゲーション ドロワーの実装には、次の 3 つのユースケースを考えてみましょう。
- コンテンツ整理: ユーザーがニュースアプリやブログアプリなどのカテゴリを切り替えられるようにします。
- アカウント管理: ユーザー アカウントを使用するアプリのアカウント設定とプロファイル セクションへのクイックリンクを提供します。
- 機能の紹介: 1 つのメニューに複数の機能と設定を整理して、ユーザーが複雑なアプリで簡単に見つけてアクセスできるようにします。
マテリアル デザインには、次の 2 種類のナビゲーション ドロワーがあります。
- 標準: 画面上のスペースを他のコンテンツと共有できます。
- モーダル: 画面内の他のコンテンツの上に表示されます。
例
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
関数のほか、現在のドロワーの状態に関連するプロパティへのアクセスを提供します。これらの suspend 関数には CoroutineScope
が必要です。これは rememberCoroutineScope
を使用してインスタンス化できます。UI イベントに応じて suspend 関数を呼び出すこともできます。
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 } }