Lets say we have a main screen with a `Scaffold` The Scaffol kotlinlang #compose

. Navigating between the child screens means switching the content of the Scaffold. How can I have different TopBar actions on each screen? Do I have to drop the TopAppBar of the main screen and let the child screens have its own Scaffold with TopAppBar ? Another possibility I'm aware of would be to pass down the related TopBar composable and switch it on screen change like I do it with the screen content?

mattinger

05/12/2022, 1:27 PM

You’ll need to create some kind of UIState object which can be altered as the user navigates around. How you alter it is really dependent on your actual method of navigation. But generally, you’d have to pass down the current state and a way to alter it:

@Composable
fun SomeTab(
    uiState: UIState,
    onUpdateUIState: (UIState) -> Unit
) {

    LaunchedEffect(key1=true) {
        onUpdateUIState( uiState.copy(....) )
    }

    // content goes here
}

Or something of this nature

If you want the additive effect of actions that you have with fragments and menu inflation, you could use DisposableEffect instead, and alter the UIState when the composable goes away as well

DisposableEffect(key1=true) {
    onUpdateUIState(
       uiState.copy( /* Add actions, set title, etc.... */ )
    )
    onDispose {
        onUpdateUIState(
            uiState.copy( /* Remove actions */ )
        )
    }

Lilly

05/12/2022, 1:32 PM

Ah ok the second example makes it clear what you mean. Yeah this covers my second approach but with a state object instead of a composable. I guess this is the only valid solution. Thanks for the hint

4 Views

#compose Join Slack