如何在Kotlin Compose中通过CenterAlignedTopAppBar导航图标实现下拉菜单？

要实现点击导航图标显示带页面链接的LazyColumn，核心是用状态控制菜单显示/隐藏，再配合Material3的抽屉组件承载菜单列表，具体步骤如下：

1. 维护菜单显示状态 #

在主Composable中，用rememberDrawerState和协程作用域来管理抽屉的打开/关闭状态，比普通布尔值更贴合Material3的交互逻辑：

val drawerState = rememberDrawerState(DrawerValue.Closed)
val scope = rememberCoroutineScope()

2. 用ModalDrawer包裹主内容 #

把页面内容和TopAppBar放在ModalDrawer内部，抽屉区域就是你要的LazyColumn菜单：

ModalDrawer(
    drawerState = drawerState,
    drawerContent = {
        LazyColumn(modifier = Modifier.fillMaxSize()) {
            // 可选：添加菜单头部
            item {
                Text(
                    text = "导航菜单",
                    modifier = Modifier.padding(16.dp),
                    style = MaterialTheme.typography.titleMedium
                )
            }
            // 页面链接列表
            items(menuItems) { item ->
                ListItem(
                    headlineContent = { Text(item.title) },
                    leadingContent = { Icon(item.icon, contentDescription = null) },
                    modifier = Modifier.clickable {
                        // 点击菜单项逻辑：关闭菜单+页面跳转
                        scope.launch { drawerState.close() }
                    }
                )
            }
        }
    }
) {
    // 主内容区域，包含TopAppBar和页面UI
    Scaffold(
        topBar = { 
            PresentAppAppBar(onMenuClick = {
                scope.launch { drawerState.open() }
            }) 
        }
    ) { paddingValues ->
        // 页面内容，用paddingValues避免被TopAppBar遮挡
        Box(modifier = Modifier.padding(paddingValues)) {
            // 你的页面具体UI
        }
    }
}

3. 改造PresentAppAppBar #

给它添加点击回调，用来触发菜单打开：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun PresentAppAppBar(
    modifier: Modifier = Modifier,
    onMenuClick: () -> Unit // 新增菜单点击回调
) {
    CenterAlignedTopAppBar(
        title = { Text(stringResource(R.string.app_name)) },
        navigationIcon = {
            Icon(
                imageVector = Icons.Filled.Menu,
                modifier = Modifier
                    .clickable { onMenuClick() } // 调用回调打开菜单
                    .padding(8.dp)
                    .size(32.dp),
                contentDescription = "打开导航菜单" // 适配无障碍需求
            )
        },
        modifier = modifier
    )
}

4. 定义菜单数据类（可选） #

为了让菜单列表更易维护，可定义数据类统一管理菜单项：

data class MenuItem(
    val title: String,
    val icon: ImageVector
)

// 示例菜单数据
val menuItems = listOf(
    MenuItem("首页", Icons.Filled.Home),
    MenuItem("我的", Icons.Filled.Person),
    MenuItem("设置", Icons.Filled.Settings)
)

这样点击TopAppBar的菜单图标，就会从左侧滑出带LazyColumn的侧边菜单，点击菜单项可自动关闭菜单并处理页面跳转逻辑。

内容的提问来源于stack exchange，提问作者Jeffrey Huig