北京教育学会网站建设微信开发者账号

北京教育学会网站建设,微信开发者账号,天元建设集团有限公司第六建筑工程公司,外贸响应式网站建设这一节主要了解一下Compose中的ModalNavigationDrawer,在Jetpack Compose开发中#xff0c;ModalNavigationDrawer是一个用于实现模态导航抽屉的核心组件#xff0c;它允许用户通过侧滑手势或点击菜单图标触发一个覆盖在主内容之上的抽屉菜单#xff0c;提供页面切换、功能导…这一节主要了解一下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支持。