How to change topBar corresponding screen in Jetpack Compose

Question

I have a Scaffold like this:

Scaffold(
   topBar = {
       TopBar(...)
   },
   bottomBar = {
       BottomNavigationBar(...)
   }
) {
    NavHost(...)
}

What is the best way to change TopBar when I navigate to another screen?

score 2 · Answer 1 · answered Sep 01 '21 at 10:03

2

There are two possible ways to go:

Observing currentScreen and use when inside topBar and change it according to that
Put topbar inside the screen it belongs to.

For me prefer the second one since it's not shared with each other, there's no reason to use ugly when statement for it.

answered Sep 01 '21 at 10:03

adwardwo1f

For (2), should I put `Scaffold()` inside each screen? Or, I can use single `Scaffold()`, but create a mutable state of composable function (the content of top bar), pass that state to and set it from each screen? – xierch Oct 06 '21 at 13:43
1

@xierch yes, put `Scaffold()` inside each screen. What u just said is (1) `currentScreen ` which is `mutableState` with a single `Scaffold()` – adwardwo1f Oct 07 '21 at 09:20
1

Since I use BottomAppBar I already have a scaffold on my main screen, can I nest another scaffold inside the main scaffold to manage the TopAppBar according to the sub screen where I am, or there are some problems doing this? – TheFedex87 Jun 24 '22 at 16:37

1 Answers1