Jetpack Compose组建学习之ModalDrawer示例

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 = modifier.f