使用 Jetpack Compose 在 Android 的 ActionBar 中创建选项菜单

在 Android 中，ac ActionBar 或 TopBar 是出现在活动屏幕顶部的 UI 元素。默认情况下，ActionBar 会在其中显示活动名称。但是，我们可以在 ActionBar 中添加其他元素，例如后退按钮、图像、选项菜单等。因此，在本文中，我们将向您展示如何使用 Jetpack Compose 在 Android 的 ActionBar 中创建选项菜单。 IDE 准备就绪后，请按照以下步骤操作。

分步实施

第 1 步：在 Android Studio 中创建一个新项目

要在 Android Studio 中创建新项目，请参阅如何在 Android Studio 中创建/启动新项目。选择模板时，选择Empty Compose Activity 。如果您没有找到此模板，请尝试将 Android Studio 升级到最新版本。我们在Kotlin中演示了该应用程序，因此请确保在创建新项目时选择 Kotlin 作为主要语言。

第 2 步：使用 MainActivity.kt 文件

转到MainActivity.kt文件并参考以下代码。下面是MainActivity.kt文件的代码。代码中添加了注释以更详细地理解代码。

Kotlin

package com.geeksforgeeks.jcactionbarmenuoptions
  
import android.os.Bundle
import android.widget.Toast
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.MoreVert
import androidx.compose.runtime.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.tooling.preview.Preview
  
class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Calling the composable function
            // to display element and its contents
            MainContent()
        }
    }
}
  
// Creating a composable function 
// to display Top Bar and options menu
@Composable
fun MainContent() {
    
    // Create a boolean variable 
    // to store the display menu state
    var mDisplayMenu by remember { mutableStateOf(false) }
      
    // fetching local context
    val mContext = LocalContext.current
  
    // Creating a Top bar
    TopAppBar(
        title = { Text("GFG | Menu Options", color = Color.White) } ,backgroundColor = Color(0xff0f9d58),
        actions = {
              
            // Creating Icon button favorites, on click 
            // would create a Toast message
            IconButton(onClick = { Toast.makeText(mContext, "Favorite", Toast.LENGTH_SHORT).show() }) {
                Icon(Icons.Default.Favorite, "")
            }
  
            // Creating Icon button for dropdown menu
            IconButton(onClick = { mDisplayMenu = !mDisplayMenu }) {
                Icon(Icons.Default.MoreVert, "")
            }
  
            // Creating a dropdown menu
            DropdownMenu(
                expanded = mDisplayMenu,
                onDismissRequest = { mDisplayMenu = false }
            ) {
  
                // Creating dropdown menu item, on click
                // would create a Toast message
                DropdownMenuItem(onClick = { Toast.makeText(mContext, "Settings", Toast.LENGTH_SHORT).show() }) {
                    Text(text = "Settings")
                }
  
                // Creating dropdown menu item, on click 
                // would create a Toast message
                DropdownMenuItem(onClick = { Toast.makeText(mContext, "Logout", Toast.LENGTH_SHORT).show() }) {
                    Text(text = "Logout")
                }
            }
        }
    )
}
  
// For displaying preview in 
// the Android Studio IDE emulator
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MainContent()
}

输出：

您可以看到我们能够创建选项菜单以及下拉菜单，如下面的输出视频所示。