So handhaben Sie die Navigation in Navigation3 ⇐ Android

[Anonymous]

Ich verfasse diesen Beitrag, weil ich versuche, eine Anwendung mit der folgenden Navigation zu erstellen:

Code: Select all

GlobalNavigation
│
├── AuthActivity (without bottombar)
│   ├── LoginScreen
│   ├── RecoveryScreen
│   ├── SignUpScreen
│
└── MainActivity
│
├── HomeNavTopLevel Graph (Home, Chat, Settings…) → with BottomBar
│   ├ Home
│   ├ Profile
│
└── SettingsNavTopLevel Graph (Setting or more screens) → without BottomBar
├ One or more screens

Meine Frage ist die nächste:

• Wie vermeide ich die Größenänderung des Einstellungsbildschirms, wenn ich von einem Bildschirm in der unteren Leiste dorthin navigiere?
• Ich muss für jede oberste Ebene ein NavDisplay erstellen, um die untere Leiste im Einstellungsbildschirm zu vermeiden (auch wenn die Einstellungen nicht Teil der unteren Leiste sind).

Meine aktuelle Implementierung ist ein NavDisplay in einem Scaffold, das die MainActivity-Navigation wie im obigen Beispiel enthält und die untere Leiste ausblendet, wenn topLevelStack keine BottomBar-Schnittstelle ist. Wenn Sie jedoch das GIF unten sehen, werden Sie sehen, dass, wenn ich zu Einstellungen navigiere, die untere Leiste ausgeblendet ist, der SettingsScreen (Gelb) jedoch für einen Moment die gleiche Höhe wie die unteren Leistenbildschirme hat und sich einige Millisekunden (oder Sekunden) entlang des Bildschirms ausdehnt (weil die Die untere Leiste wurde ausgeblendet.
HINWEIS: In navigation2 habe ich einen navController für jede Unternavigation erstellt, so wie auth und main einen NavHostController haben, aber darin eine subNavigation mit Navigation erstellen und nur für Home habe ich einen weiteren NavHostController erstellt, um die BottomBar-Navigation zu verwalten.
MainActivity-Inhalt (Composables):

Code: Select all

@Composable
fun MainContent(
openAuthActivity: () -> Unit,
navigator: MainNavigator
) {
SerenoTheme(
dynamicColor = false
) {
Scaffold(
modifier = Modifier
.fillMaxSize(),
bottomBar = {
AnimatedVisibility(
navigator.topLevelKey is BottomBar,
enter = fadeIn(),
exit = fadeOut()
) {
NavigationBar(

) {
HomeBottomBarItems.HOME_LEVEL_ROUTES.forEach { (key, item) ->
val isSelected = key == navigator.topLevelKey

NavigationBarItem(
selected = isSelected,
onClick = {
navigator.switchTopLevel(key)
},
icon = {
Icon(
imageVector = item.icon,
contentDescription = null,
)
},
label = {
Text(
text = stringResource(item.labelStringRes)
)
}
)
}
}
}
}
) { innerPadding ->
val modifier = remember {
Modifier.padding(innerPadding)
}

MainDisplay(
modifier = modifier,
navigator = navigator,
openAuthActivity = openAuthActivity
)
}
}
}

Mi-versiegelte Schnittstelle für Ziele:

Code: Select all

sealed interface BottomBar

sealed interface MainRoute : NavKey {
@Serializable
data object Home : MainRoute, BottomBar

@Serializable
data object Profile : MainRoute, BottomBar

@Serializable
data object Settings : MainRoute
}

AppNavigator zur Unterstützung mehrerer Backstacks:

Code: Select all

class AppNavigator(private val startKey: T) {

private var topLevelBackStacks: HashMap = hashMapOf(
startKey to mutableStateListOf(startKey)
)

var topLevelKey by mutableStateOf(startKey)
private set

val backStack = mutableStateListOf(startKey)

private fun updateBackStack() {
backStack.clear()
val currentStack = topLevelBackStacks[topLevelKey] ?: emptyList()

if (topLevelKey == startKey) {
backStack.addAll(currentStack)
} else {
val startStack = topLevelBackStacks[startKey] ?: emptyList()
backStack.addAll(startStack + currentStack)
}
}

fun switchTopLevel(key: T) {
if (topLevelBackStacks[key] == null) {
topLevelBackStacks[key] = mutableStateListOf(key)
}
topLevelKey = key
updateBackStack()
}

fun add(key: T) {
topLevelBackStacks[topLevelKey]?.add(key)
updateBackStack()
}

fun removeLast() {
val currentStack = topLevelBackStacks[topLevelKey] ?: return

if (currentStack.size >  1) {
currentStack.removeLastOrNull()
} else if (topLevelKey != startKey) {
topLevelKey = startKey
}
updateBackStack()
}

fun replaceStack(vararg keys: T) {
topLevelBackStacks[topLevelKey] = mutableStateListOf(*keys)
updateBackStack()
}
}

Und ein Video, das zeigt, wie die Anwendung funktioniert: