モケラ

Tech Sheets

mokelab

TopAppBarで右上オーバーフローメニューを追加する

最終更新日:2023-11-13

Jetpack ComposeのTopAppBarの右上にオーバーフローメニューを追加するには DropdownMenu を使います。

まず、メニューの開閉状態を追加します。

var expanded by remember { mutableStateOf(false) }

そして TopAppBar の actions の中で、ボタンと DropdownMenu をセットで配置します。

TopAppBar(
  title = { Text("Title") },
  actions = {
    IconButton(onClick = { expanded = !expanded }) {
      Icon(
        imageVector = Icons.Default.MoreVert,
        contentDescription = "More",
      )
      DropdownMenu(expanded = expanded, onDismissRequest = { expanded = false }) {
        DropdownMenuItem(text = { Text("Item1") }, onClick = {
          expanded = false
        })
        DropdownMenuItem(text = { Text("Item2") }, onClick = {
          expanded = false
        })
      }
    }
  }
)

オーバーフローメニューが表示された状態は次のようになります。

一覧に戻る