如何在 Jetpack Compose 中创建没有 TopAppBar 的抽屉 - Android

Question

所以我是 Jetpack compose 的新手，我正在尝试弄清楚如何将抽屉功能添加到我视图中的按钮。

我为我的问题找到的与 XML 命令式方法相关的对应问题 Navigation Drawer without Actionbar

很想了解相同的方法。

Answer 1

您可以使用Scaffold并仅配置其中的抽屉。可组合项接受插槽，您可以在其中放置适合您需要的任何内容

见documentation

Answer 2

我想您可以通过多种方式完成此操作。我只会 post 2 个选择

1- 您可以将脚手架与 drawerContent 一起使用，并将您的布局添加为该内容

val scaffoldState = rememberScaffoldState()

val coroutineScope = rememberCoroutineScope()
val openDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.open() } }
val closeDrawer: () -> Unit = { coroutineScope.launch { scaffoldState.drawerState.close() } }


Scaffold(
    scaffoldState = scaffoldState,
    drawerContent = {
        AppDrawer(
            currentRoute = currentRoute,
            navigateToHome = {
                currentRoute = Routes.HOME_ROUTE
                navController.popBackStack()
                navController.navigate(currentRoute)
            },
            navigateToSettings = {
                currentRoute = Routes.SETTINGS_ROUTE
                navController.popBackStack()
                navController.navigate(currentRoute)
            },
            closeDrawer = closeDrawer
        )
    },

) {
    NavHost(
        navController = navController,
        startDestination = Routes.HOME_ROUTE
    ) {
        composable(Routes.HOME_ROUTE) {
            HomeComponent()
        }

        composable(Routes.SETTINGS_ROUTE) {
            SettingsComponent()
        }
    }
}

我们抽屉里的东西

@Composable
fun AppDrawer(
    currentRoute: String,
    navigateToHome: () -> Unit,
    navigateToSettings: () -> Unit,
    closeDrawer: () -> Unit
) {

    Column(modifier = Modifier.fillMaxSize()) {
        DrawerHeader()
        DrawerButton(
            icon = Icons.Filled.Home,
            label = "Home",
            isSelected = currentRoute == Routes.HOME_ROUTE,
            action = {
                if (currentRoute != Routes.HOME_ROUTE) {
                    navigateToHome()
                }
                closeDrawer()
            }
        )

        DrawerButton(
            icon = Icons.Filled.Settings,
            label = "Settings",
            isSelected = currentRoute == Routes.SETTINGS_ROUTE,
            action = {
                if (currentRoute != Routes.SETTINGS_ROUTE) {
                    navigateToSettings()
                }
                closeDrawer()
            }
        )
    }
}

您需要设置 scaffoldState 让抽屉能够通过可绘制行为之外的其他交互打开或关闭。 openDrawer 和 closeDrawer 如果您需要打开或关闭抽屉，例如在内容上触摸抽屉上的项目，则需要 lambda。

2- 使用 ModalDrawer

@Composable
private fun ModalDrawerComponent() {
    val drawerState = rememberDrawerState(DrawerValue.Closed)
    val coroutineScope = rememberCoroutineScope()
    val openDrawer: () -> Unit = { coroutineScope.launch { drawerState.open() } }
    val closeDrawer: () -> Unit = { coroutineScope.launch { drawerState.close() } }
    var selectedIndex by remember { mutableStateOf(0) }

    ModalDrawer(
        drawerState = drawerState,
        drawerContent = {
            ModalDrawerContentHeader()
            Divider()
            ModelDrawerContentBody(
                selectedIndex,
                onSelected = {
                    selectedIndex = it
                },
                closeDrawer = closeDrawer
            )
        },
        content = {
            Column(modifier = Modifier.fillMaxSize()) {
//                ModalDrawerTopAppBar(openDrawer)
                ModalContent(openDrawer)
            }
        }
    )
}

使用 ModalDrawer，如果您不想添加 TopAppBar，您可以根据需要设置您的内容，您只需不将其添加到内容中即可。我在这里评论它以显示它不存在。

您可以检查包含实现的 repo here。

如何在 Jetpack Compose 中创建没有 TopAppBar 的抽屉 - Android

How to create a drawer without TopAppBar in Jetpack Compose - Android

android

android-jetpack-compose

android-jetpack-navigation

android-jetpack-compose-scaffold