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

Question

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

我发现的与 XML 命令式方法Navigation Drawer without Actionbar有关的问题的对应问题

很想了解相同的方法。

Answer 1

您只能使用Scaffold和配置其中的抽屉。可组合物接受插槽，您可以在其中放置任何适合您需要的东西

请参阅文档

Answer 2

我猜你可以通过多种方式实现这一点。我只会发布2个替代品

1-您可以使用 ScaffolddrawerContent并将您的布局添加为此内容

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让抽屉能够通过除可绘制行为之外的其他交互来打开或关闭。 如果您需要打开或关闭抽屉，例如在内容上触摸抽屉上的项目，则需要 lambda openDrawer。closeDrawer

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，您只是不要将其添加到内容中。我在这里评论它以显示它不存在。

您可以在此处查看包含实现的存储库。