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
        })
      }
    }
  }
)
オーバーフローメニューが表示された状態は次のようになります。


