ナビゲーションドロワー

ナビゲーション ドロワー コンポーネントは、ユーザーが移動するためのスライドイン メニューです。 アプリの各セクションへの横からスワイプすることで有効にできる メニューアイコンをタップすることもできます。

ナビゲーション ドロワーを実装する際は、次の 3 つのユースケースを検討してください。

  • コンテンツの整理: ニュースアプリやブログアプリなど、ユーザーがさまざまなカテゴリを切り替えられるようにします。
  • アカウント管理: アカウント設定とプロフィールへのクイックリンクを提供します。 セクションがあります。
  • 機能の検出: 複数の機能と設定を 1 つのメニューに整理して、複雑なアプリでユーザーが機能を見つけてアクセスしやすくします。

マテリアル デザインでは、ナビゲーション ドロワーには次の 2 種類があります。

  • 標準: 画面上のスペースを他のコンテンツと共有できます。
  • モーダル: 画面内の他のコンテンツの上に表示されます。

例

ModalNavigationDrawer コンポーザブルを使用して、 ナビゲーションドロワー

次の例のように、drawerContent スロットを使用して ModalDrawerSheet を指定し、ドロワーのコンテンツを指定します。

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            HorizontalDivider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer は他にさまざまなドロワー パラメータを受け入れます。たとえば、次の例のように gesturesEnabled パラメータで、ドロワーがドラッグに応答するかどうかを切り替えることができます。

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

動作を制御する

ドロワーの開閉方法を制御するには、DrawerState を使用します。drawerState パラメータを使用して DrawerState を ModalNavigationDrawer に渡す必要があります。

DrawerState では、次のように open 関数と close 関数にアクセスできます。 現在のドロワーの状態に関連するプロパティを設定します。この停止状態は 関数には CoroutineScope が必要です。これは、次のコマンドを使用してインスタンス化できます。 rememberCoroutineScope。suspend 関数を呼び出すこともできます。 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
    }
}
MaterialLayoutSnippets.kt