「这是我参与2022首次更文挑战的第12天，活动详情查看：2022首次更文挑战」

官方提供了NavigationDrawer组件

模式导航抽屉通过scrim阻止与应用程序其余内容的交互。它们被提升到应用程序的大部分UI之上，不会影响屏幕的布局网格。

NavigationDrawer

NavigationDrawer有10个参数

drawerContent

表示抽屉中的内容 要传入组合函数

drawerState

NavigationDrawer的状态用 rememberDrawerState来监听

打开

DrawerValue.Open

关闭

DrawerValue.Closed

gesturesEnabled

抽屉是否可以通过手势进行互动 直接在右滑屏幕也可以打开

drawerShape

圆角

drawerTonalElevation

和传统的Elevation属性一样

drawerContainerColor

背景色

drawerContentColor

内容的颜色

scrimColor

抽屉打开时遮盖物品的纸条颜色 就是右边的颜色 默认是透明

使用方法

@ExperimentalMaterial3Api
@Composable
fun NavigationDrawerSample() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val scope = rememberCoroutineScope()
    NavigationDrawer(
        scrimColor = Color.Cyan,
        drawerState = drawerState,
        drawerContent = {
            Button(
                modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 16.dp),
                onClick = { scope.launch { drawerState.close() } },
                content = { Text("关闭") }
            )
        },
        content = {
            Column(
                modifier = Modifier.fillMaxSize().padding(16.dp),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = if (drawerState.isClosed) ">>>>>>>>>" else "<<<<<<<<<")
                Spacer(Modifier.height(20.dp))
                Button(onClick = { scope.launch { drawerState.open() } }) {
                    Text("打开")
                }
            }
        }
    )
}

来源于官方文档

rememberCoroutineScope

这个就是可以在Composable中使用协程的

我们使用rememberCoroutineScope创建一个scope
接着调用launch方法就在launch里面实现侧边栏的开启和关闭

底部弹窗

模式底页显示一组选项，同时阻止与屏幕其他部分的交互。它们是内联菜单和简单对话框的替代品，为内容、图像和动作提供了额外的空间。

@Composable
@OptIn(ExperimentalMaterialApi::class)
private fun ModalBottomSheetLayoutExample() {
    val state = rememberModalBottomSheetState(ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()
    ModalBottomSheetLayout(
        sheetState = state,
        sheetContent = {
            LazyColumn {
                items(50) {
                    ListItem(
                        text = {
                            Text("item:$it")
                        },
                        icon = {
                            Icon(
                                Icons.Filled.Favorite,
                                contentDescription = null
                            )
                        }
                    )
                }
            }
        }
    ) {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {

            Spacer(Modifier.height(20.dp))
            Button(onClick = { scope.launch { state.show() } }) {
                Text("显示")
            }
        }
    }
}

使用方法和侧边栏差不多 效果图