导航抽屉

导航抽屉组件是一个滑入式菜单，允许用户导航到应用的不同部分。用户可以通过从侧面滑动或点击菜单图标来激活它。

考虑以下三种实现导航抽屉的用例

• 内容组织：使用户能够在不同的类别之间切换，例如新闻或博客应用。
• 账户管理：在具有用户账户的应用中提供指向账户设置和个人资料部分的快速链接。
• 功能发现：将多个功能和设置组织在一个菜单中，以便在复杂的应用中促进用户发现和访问。

在 Material Design 中，有两种类型的导航抽屉

• 标准：与其他内容共享屏幕空间。
• 模态：出现在屏幕上其他内容的顶部。

示例

您可以使用 ModalNavigationDrawer 可组合函数来实现导航抽屉。

使用 drawerContent 插槽提供一个 ModalDrawerSheet 并提供抽屉的内容，如下例所示

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer 接受许多其他抽屉参数。例如，您可以使用 gesturesEnabled 参数切换抽屉是否响应拖动，如下例所示

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

控制行为

要控制抽屉的打开和关闭方式，请使用 DrawerState。您应该将 DrawerState 传递给 ModalNavigationDrawer，使用 drawerState 参数。

DrawerState 提供对 open 和 close 函数的访问，以及与当前抽屉状态相关的属性。这些挂起函数需要一个 CoroutineScope，您可以使用 rememberCoroutineScope 实例化它。您还可以响应 UI 事件调用挂起函数。

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt