Jetpack Compose ドロワー関連の @Composable 関数
ModalNavigationDrawer→ 左からスライドして開くドロワー。画面を覆うように出る
DismissibleNavigationDrawer
→ スワイプで閉じられるドロワー。横方向にスワイプして消せる
PermanentNavigationDrawer
→ 常時表示されるドロワー。タブレットや大画面向け
ModalDrawerSheet
→ ModalNavigationDrawer の中身(ドロワーのシート部分)を定義
DismissibleDrawerSheet
→ DismissibleNavigationDrawer の中身(シート部分)を定義
PermanentDrawerSheet
→ PermanentNavigationDrawer の中身を定義
NavigationDrawerItem
→ ドロワーの中の 1 行(リストアイテム)を作成する
NavigationDrawerItemDefaults
→ NavigationDrawerItem のデフォルトスタイル(色や形)を取得できる
📘 よくある実装イメージ
ModalNavigationDrawer(
drawerContent = {
ModalDrawerSheet {
Text("メニュー", modifier = Modifier.padding(16.dp))
NavigationDrawerItem(
label = { Text("ホーム") },
selected = true,
onClick = { /* クリック処理 */ }
)
NavigationDrawerItem(
label = { Text("設定") },
selected = false,
onClick = { /* クリック処理 */ }
)
}
}
) {
// メイン画面の内容
Scaffold(
topBar = { TopAppBar(title = { Text("My App") }) }
) { innerPadding ->
Column(Modifier.padding(innerPadding)) {
Text("メイン画面の内容")
}
}
}
まとめると
ModalNavigationDrawer = 「ドロワー全体」
ModalDrawerSheet = 「ドロワーの中身」
NavigationDrawerItem = 「メニュー項目」
という階層になっている。