如何使用Jetpack Compose创建带有溢出菜单的工具栏？

Jetpack Compose 是 Android 的现代 UI 工具包，它允许开发者使用 Kotlin 代码来构建用户界面。要创建一个带有溢出菜单的工具栏（Toolbar），你可以按照以下步骤进行：

基础概念

Jetpack Compose: 是 Google 推出的用于构建 Android 应用的 UI 框架，它简化了 UI 开发流程，使得代码更加简洁和直观。
Toolbar: 在 Android 中，Toolbar 是一个用于显示标题、导航图标和菜单的通用组件。
Overflow Menu: 当工具栏中的项目过多无法全部显示时，可以通过溢出菜单来访问额外的项目。

类型

Material Design Toolbar: 遵循 Material Design 设计规范的 Toolbar。

应用场景

适用于需要自定义菜单项的应用，如设置页面、导航抽屉等。

创建带有溢出菜单的工具栏

以下是一个简单的示例代码，展示如何使用 Jetpack Compose 创建一个带有溢出菜单的工具栏：

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import androidx.compose.ui.window.WindowCompat
import androidx.compose.ui.window.application

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                var expanded by remember { mutableStateOf(false) }
                val scope = rememberCoroutineScope()

                TopAppBar(
                    title = { Text("Toolbar with Overflow Menu") },
                    navigationIcon = {
                        IconButton(onClick = { /* Handle navigation icon click */ }) {
                            Icon(Icons.Default.ArrowBack, contentDescription = "Back")
                        }
                    },
                    actions = {
                        IconButton(onClick = { expanded = !expanded }) {
                            Icon(expanded ? Icons.Default.ExpandLess : Icons.Default.ExpandMore, contentDescription = "Overflow")
                        }
                        DropdownMenu(
                            expanded = expanded,
                            onDismissRequest = { expanded = false },
                            modifier = Modifier.align(Alignment.CenterVertically)
                        ) {
                            DropdownMenuItem(onClick = { /* Handle menu item click */ }) {
                                Text("Menu Item 1")
                            }
                            DropdownMenuItem(onClick = { /* Handle menu item click */ }) {
                                Text("Menu Item 2")
                            }
                            DropdownMenuItem(onClick = { /* Handle menu item click */ }) {
                                Text("Menu Item 3")
                            }
                        }
                    },
                    backgroundColor = Color.Blue,
                    elevation = 8.dp,
                    contentColor = Color.White,
                    modifier = Modifier.fillMaxWidth().padding(16.dp)
                )
            }
        }
    }
}

@Composable
fun MyApp(content: @Composable () -> Unit) {
    MaterialTheme(
        colors = lightColors(
            primary = Color.Blue,
            background = Color.White
        )
    ) {
        content()
    }
}

fun main() = application {
    WindowCompat(
        onCreate = { window ->
            window.title = "Jetpack Compose Toolbar"
            window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_LIGHT_NAVIGATION_BAR or View.SYSTEM_UI_FLAG_LIGHT_STATUS_BAR
        },
        onCloseRequest = {}
    ) {
        MyApp {
            // Your UI content here
        }
    }
}