4. 导航图标定制

导航图标是 TopAppBar 左端最常见的槽位（navigationIcon），通常用于返回上一级或打开侧边导航抽屉。本章将讲解如何完全定制该图标的外观、点击行为、与 Drawer 的联动逻辑，以及如何通过无障碍标签确保所有用户均可操作。

4.1 原理

TopAppBar 的 navigationIcon 槽位接收一个 @Composable 块，通常包含一个 IconButton 或 Icon。当点击导航图标时，应用据此执行返回、关闭或打开抽屉等操作。在 Material Design 3 规范中，导航图标统一使用 48dp 触控区域，且必须附带含义清晰的无障碍标签（contentDescription）。

4.2 实现流程

1. 确定图标源：选用系统内置图标、自定义矢量图或图片资源。
2. 绑定点击事件：在 onClick 中执行 drawerState.open()（打开抽屉）或 navController.popBackStack()（返回）。
3. 设置无障碍描述：为图标注入 contentDescription，如 “打开导航菜单”。
4. 测试：使用 TalkBack 或 Accessibility Scanner 验证。

4.3 代码示例

以下是在 Jetpack Compose 中定制导航图标并与 Drawer 联动的完整实现。该例使用自定义的 Material 图标替代默认汉堡图标。

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavigationIconDrawerExample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()

    ModalNavigationDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerSheet {
                Text("Drawer 内容", modifier = Modifier.padding(16.dp))
            }
        }
    ) {
        Scaffold(
            topBar = {
                TopAppBar(
                    title = { Text("首页") },
                    navigationIcon = {
                        IconButton(
                            onClick = {
                                scope.launch {
                                    if (drawerState.isClosed) drawerState.open()
                                    else drawerState.close()
                                }
                            }
                        ) {
                            Icon(
                                imageVector = Icons.Filled.Menu,      // 可替换为自定义图标
                                contentDescription = "打开导航菜单",  // 无障碍标签
                                tint = MaterialTheme.colorScheme.onSurface
                            )
                        }
                    }
                )
            }
        ) { padding ->
            Box(modifier = Modifier.fillMaxSize().padding(padding)) {
                Text("主内容区域")
            }
        }
    }
}

4.3.1 自定义图标替换

若要改为返回箭头（Icons.AutoMirrored.Filled.ArrowBack），只需修改 imageVector 参数；如需使用自定义 SVG 图标，可将其转为 ImageVector 或使用 painterResource：

Icon(
    painter = painterResource(id = R.drawable.ic_custom_menu),
    contentDescription = "打开菜单",
    tint = MaterialTheme.colorScheme.onSurface
)

4.4 调试要点

• 点击无响应：检查 onClick 是否包含在 IconButton 内，且 IconButton 位于 navigationIcon 槽位。
• Drawer 无法打开：确认 drawerState 的协程作用域正确，并已调用 drawerState.open()。
• 无障碍信息缺失：运行 adb shell am start -n com.android.talkback/.TalkBackService 触发 TalkBack，或使用 Accessibility Scanner 扫描。

4.5 常见错误

4.6 性能与稳定性优化

• 使用 rememberDrawerState 避免状态重建；切勿在可组合项中反复创建新的 DrawerState。
• 图标等资源使用 @Composable 函数缓存，避免每次重组都重新加载。
• 对于复杂 Drawer 内容，使用 ModalNavigationDrawer 而非 DismissibleDrawerSheet 以获取动画过渡稳定性。
• 在 onClick 中避免执行耗时操作；若需网络请求，应切换至 Dispatchers.IO。