Durch Drücken der Zurück-Taste auf einem ModalNavigationDrawer wird zurück navigiert, anstatt die Schublade zu schließen ⇐ Android

[Anonymous]

Ich arbeite an einer Android-App, die Jetpack Compose und Compose Destinations für die Navigation verwendet. Meine App verfügt über einen ModalNavigationDrawer. Das Modal lässt sich problemlos mit Gesten öffnen und schließen, aber wenn das Modal geöffnet ist, möchte ich, dass es mit der Zurück-Schaltfläche geschlossen werden kann. Das fühlt sich wie eine natürliche Aktion an und funktioniert in fast jeder anderen App, die ich verwendet habe.
Stattdessen wird mit der Zurück-Schaltfläche einfach die App geschlossen (minimiert) oder zum vorherigen Bildschirm navigiert. Ich gehe davon aus, dass das daran liegt, dass Compose Destinations die hintere Aktion abfängt und vom hinteren Stapel abspringt. Allerdings wird in der Dokumentation auf den ersten Blick nichts über die Lösung dieses Problems erwähnt. Das einzige Mal, dass Schubladen erwähnt werden, ist hier, aber das ist für das vorliegende Problem nicht relevant.
Ich habe auf SO ein paar Beiträge darüber gefunden, wie man die Rückwärtspresse abfängt, aber diese scheinen mir etwas hackig zu sein. Dies scheint ein grundlegender Anwendungsfall zu sein, für den es eine einfache und anständige Lösung geben sollte. Daher kam ich zu der Frage, ob es eine empfohlene Lösung für dieses Problem gibt.
Die Haupt-App sieht so aus:

Code: Select all

@Composable
fun App() {
val navEngine = rememberNavHostEngine()
val navController = navEngine.rememberNavController()
val startRoute = HomeRouteDestination

Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colorScheme.background
) {
DestinationsNavHost(
engine = navEngine,
navController = navController,
navGraph = NavGraphs.root,
startRoute = startRoute
)
}
}

Meine Schubladenkomponente:

Code: Select all

private data class DrawerItem(
val icon: ImageVector,
val name: String,
val destination: DirectionDestination
)

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun NavDrawerWrapper(
navigator: DestinationsNavigator = EmptyDestinationsNavigator,
content: @Composable (() -> Unit, () -> Unit) -> Unit
) {
val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()

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

val items = listOf(
DrawerItem(Icons.Default.List, "Menu", HomeRouteDestination),
DrawerItem(Icons.Default.Settings, "Settings", SettingsRouteDestination)
)

var selectedItem by remember { mutableStateOf(items[0]) }

ModalNavigationDrawer(
drawerState = drawerState,
drawerContent = {
DrawerSheet(
items, selectedItem,
onSelectItem = { item ->
closeDrawer()
selectedItem = item
navigator.navigate(item.destination)
}
)
},
content = { content(openDrawer, closeDrawer) }
)
}

@OptIn(ExperimentalMaterial3Api::class)
@Composable
private fun DrawerSheet(
items: List = listOf(),
selectedItem: DrawerItem? = null,
onSelectItem: (DrawerItem) -> Unit = {}
) {
ModalDrawerSheet {
LazyColumn(modifier = Modifier.padding(horizontal = 15.dp, vertical = 20.dp)) {
items(items.size) { index ->
val item = items[index]
NavigationDrawerItem(
label = { Text(text = item.name) },
icon = { Icon(imageVector = item.icon, contentDescription = item.name) },
selected = item == selectedItem,
onClick = { onSelectItem(item) }
)
}
}

}
}