JetpackComposeでOverflow Menuの作り方

右上にある三点リーダー
これがOverflow Menuですね！
これをJetpackComposeで実装してみた

・三点リーダー

IconButton() {
    Icon(
        Icons.Default.MoreVert
    )
}

 

・実装の仕方
DropdownMenuとDropdownMenuItemで作る
https://stackoverflow.com/questions/65373652/how-can-toolbar-with-overflow-menu-be-created-with-jetpack-compose

DropdownMenu() {
    DropdownMenuItem(onClick = {
        // 処理
    }) {
        Text()
    }
    DropdownMenuItem(onClick = {
        // 処理
    }) {
        Text()
    }
}

 

・メニューの表示/非表示

var showMenu by remember { mutableStateOf(false) }
DropdownMenu(
    expanded = showMenu,
    onDismissRequest = { showMenu = false },

 

・画面遷移
https://stackoverflow.com/questions/65088035/how-to-navigate-from-a-composable-to-an-activity-or-a-fragment-in-jetpack-compos
nativagtionを導入してなければ

val context = LocalContext.current
context.startActivity(Intent(context, AAAActvity::class.java))

navigationを導入してあれば

navController.navigate(HOGE) 

 

・位置の設定
Menuが三点リーダーの下にある
既存だと三点リーダーとかぶってるので位置を変えたくなるよね
https://stackoverflow.com/questions/65662803/open-dropdown-below-the-selected-value-flutter

DropdownMenu(
    offset = DpOffset(
        0.dp,
        -20.dp
    ),

関連記事:

• JetpackComposeにNavigationを入れてみた
• Jetpack Compose Navigationでオブジェクトを渡して画面遷移する
• Jetpack Composeで調べたこと その1