Compose笔记(六十六)--ModalNavigationDrawer

这一节主要了解一下Compose中的ModalNavigationDrawer,在Jetpack Compose开发中，ModalNavigationDrawer是一个用于实现模态导航抽屉的核心组件，它允许用户通过侧滑手势或点击菜单图标触发一个覆盖在主内容之上的抽屉菜单，提供页面切换、功能导航等功能。简单总结如下:

API:
drawerContent：定义抽屉菜单的内容。
drawerState：控制抽屉的打开/关闭状态。
gesturesEnabled：是否启用侧滑手势。
scrimColor：抽屉背景的遮罩层颜色。
content：抽屉外部的主内容。

一般场景:
1 页面导航 通过抽屉菜单切换不同页面
2 功能入口 集中管理应用的核心功能
3 账号管理 提供快速访问账号设置、个人资料的入口

栗子:

import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Home import androidx.compose.material.icons.outlined.Menu import androidx.compose.material.icons.outlined.Message import androidx.compose.material.icons.outlined.Person import androidx.compose.material.icons.outlined.Settings import androidx.compose.material3.DrawerValue import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ModalDrawerSheet import androidx.compose.material3.ModalNavigationDrawer import androidx.compose.material3.NavigationDrawerItem import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.rememberDrawerState import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import kotlinx.coroutines.launch @OptIn(ExperimentalMaterial3Api::class) @Composable fun ModalNavigationDrawerDemo() { val coroutineScope = rememberCoroutineScope() val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) data class NavItem( val title: String, val icon: @Composable () -> Unit ) val navItems = remember { listOf( NavItem("首页", { Icon(Icons.Outlined.Home, contentDescription = null) }), NavItem("消息", { Icon(Icons.Outlined.Message, contentDescription = null) }), NavItem("我的", { Icon(Icons.Outlined.Person, contentDescription = null) }), NavItem("设置", { Icon(Icons.Outlined.Settings, contentDescription = null) }) ) } val selectedItemIndex = remember { mutableStateOf(0) } ModalNavigationDrawer( drawerState = drawerState, drawerContent = { ModalDrawerSheet { LazyColumn( modifier = Modifier.padding(16.dp), verticalArrangement = Arrangement.spacedBy(8.dp) ) { items(navItems.size) { index -> val item = navItems[index] NavigationDrawerItem( label = { Text(text = item.title) }, selected = selectedItemIndex.value == index, onClick = { selectedItemIndex.value = index coroutineScope.launch { drawerState.close() } }, icon = item.icon, modifier = Modifier.padding(horizontal = 8.dp) ) } } } }, content = { Scaffold( topBar = { TopAppBar( title = { Text(text = navItems[selectedItemIndex.value].title) }, navigationIcon = { IconButton( onClick = { coroutineScope.launch { drawerState.open() } } ) { Icon(Icons.Outlined.Menu, contentDescription = "打开抽屉") } } ) } ) { innerPadding -> Column( modifier = Modifier .fillMaxSize() .padding(innerPadding) .padding(32.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text( text = "当前页面：${navItems[selectedItemIndex.value].title}", style = MaterialTheme.typography.headlineSmall ) Text( text = "可通过左侧手势滑动打开抽屉", style = MaterialTheme.typography.bodyMedium, modifier = Modifier.padding(top = 16.dp) ) } } } ) }

import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.LazyColumn import androidx.compose.material.icons.Icons import androidx.compose.material.icons.outlined.Home import androidx.compose.material.icons.outlined.Menu import androidx.compose.material.icons.outlined.Message import androidx.compose.material.icons.outlined.Person import androidx.compose.material3.Badge import androidx.compose.material3.DrawerValue import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Icon import androidx.compose.material3.IconButton import androidx.compose.material3.MaterialTheme import androidx.compose.material3.ModalDrawerSheet import androidx.compose.material3.ModalNavigationDrawer import androidx.compose.material3.NavigationDrawerItem import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.material3.TopAppBar import androidx.compose.material3.rememberDrawerState import androidx.compose.runtime.Composable import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope 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.unit.sp import kotlinx.coroutines.launch @OptIn(ExperimentalMaterial3Api::class) @Composable fun ModalNavigationDrawerDemo() { val coroutineScope = rememberCoroutineScope() val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed) data class NavItem( val title: String, val icon: @Composable () -> Unit, val badgeCount: Int? = null ) val navItems = remember { listOf( NavItem("首页", { Icon(Icons.Outlined.Home, contentDescription = null) }), NavItem("消息", { Icon(Icons.Outlined.Message, contentDescription = null) }, 99), // 带99条未读消息 NavItem("我的", { Icon(Icons.Outlined.Person, contentDescription = null) }) ) } val selectedItemIndex = remember { mutableStateOf(0) } ModalNavigationDrawer( drawerState = drawerState, drawerContent = { ModalDrawerSheet( modifier = Modifier.width(280.dp) ) { LazyColumn( modifier = Modifier .fillMaxWidth() .padding(16.dp), verticalArrangement = Arrangement.spacedBy(12.dp) ) { item { Text( text = "我的导航", style = MaterialTheme.typography.titleLarge, modifier = Modifier.padding(horizontal = 8.dp, vertical = 16.dp) ) } items(navItems.size) { index -> val item = navItems[index] NavigationDrawerItem( label = { Text(text = item.title) }, selected = selectedItemIndex.value == index, onClick = { selectedItemIndex.value = index coroutineScope.launch { drawerState.close() } }, icon = item.icon, badge = item.badgeCount?.let { count -> { Badge { Text(text = count.toString(), fontSize = 12.sp) } } }, modifier = Modifier.padding(horizontal = 8.dp) ) } } } }, scrimColor = Color.Gray.copy(alpha = 0.5f), gesturesEnabled = false, content = { Scaffold( topBar = { TopAppBar( title = { Text(text = navItems[selectedItemIndex.value].title) }, navigationIcon = { IconButton( onClick = { coroutineScope.launch { if (drawerState.isOpen) { drawerState.close() } else { drawerState.open() } } } ) { Icon(Icons.Outlined.Menu, contentDescription = "切换抽屉") } } ) } ) { innerPadding -> Column( modifier = Modifier .fillMaxSize() .padding(innerPadding) .padding(32.dp), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.Center ) { Text( text = "自定义抽屉样式Demo", style = MaterialTheme.typography.headlineSmall ) Text( text = "1. 自定义遮罩颜色\n2. 消息项带99条未读徽章\n3. 禁用手势滑动 \n4. 自定义抽屉宽度", style = MaterialTheme.typography.bodyMedium, modifier = Modifier.padding(top = 16.dp), ) } } } ) }

注意:
1 避免在drawerContent中使用复杂布局或高频更新的组件，可能导致卡顿。
2 drawerState.open()和drawerState.close()是挂起函数，必须在协程作用域。
3 ModalNavigationDrawer需要Compose Material 3支持。