Jetpack Compose组建学习之ModalDrawer示例

本文链接：https://blog.csdn.net/huozy001/article/details/127071083

本文介绍了Jetpack Compose中的ModalDrawer组件，它是Android应用的侧滑抽屉，位于UI之上。抽屉通过导航菜单图标打开，可通过选择子项、点击屏幕空白或手势关闭。文章提供了抽屉布局的详细说明，包括头部和Item的构成，并附有示例代码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ModalDrawer是Jetpack Compose提供的侧滑抽屉组件，它展开后位于应用程序的大部分UI之上。
抽屉始终由抽屉外部的启示组件打开，例如顶部应用栏中的导航菜单图标。
抽屉可以通过以下方式关闭：
1 选择了抽屉中的一个子项
2 点击屏幕空白
3 手势向起始侧边滑动

来看一下ModalDrawer的参数

@Composable
fun ModalDrawer(
    //抽屉的布局
    drawerContent: @Composable ColumnScope.() -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    //抽屉是否可以通过手势进行交互
    gesturesEnabled: Boolean = true,
    drawerShape: Shape = MaterialTheme.shapes.large,
    //边框阴影
    drawerElevation: Dp = DrawerDefaults.Elevation,
    drawerBackgroundColor: Color = MaterialTheme.colors.surface,
    drawerContentColor: Color = contentColorFor(drawerBackgroundColor),
    //抽屉展开后空白处的颜色
    scrimColor: Color = DrawerDefaults.scrimColor,
    //界面布局,收起抽屉后展示的UI
    content: @Composable () -> Unit
): Unit

先来看一下demo的界面：

在这里插入图片描述

抽屉侧滑部分的布局: 包括一个头部和三个Item

/**
 * 抽屉的布局
 */
@Composable
private fun DrawerContent(
    modifier: Modifier = Modifier,
    currenItemFlag:MutableState<DrawerItemFlag>,
    closeDrawer: () -> Unit
){
    Column(modifier = m