3.7 C
London
Saturday, January 13, 2024

android – Navigation drawback in Kotlin Multiplatform


I’m creating an software with Kotlin Multiplatform utilizing Compose Multiplatform, I’m utilizing the Voyager library to do the navigation of the applying.

I’ve a BottomNavigationBar configured and it really works accurately and inside the primary Tab I’ve a button that navigates to a Display, the issue is that after I navigate to the Display, it replaces the Tab and if I click on once more on the BottomNavigationBar to return to that principal display screen, it does nothing.

@Composable
enjoyable App() {

    val tabs = listOf(HomeTab, MapsTab)

    MaterialTheme {

        TabNavigator(tab = HomeTab,
            tabDisposable = {

                TabDisposable(
                    navigator = it,
                    tabs = tabs
                )
            }
        ) {
            Scaffold(topBar = {
                TopAppBar(title = {
                    Textual content(textual content = it.present.choices.title)
                })
            }, bottomBar = {
                BottomNavigation {
                    tabs.forEach { tab ->
                        TabNavigationItem(tab)
                    }
                }
            }, content material = {
                CurrentTab()
            })
        }
    }

}
@Composable
enjoyable RowScope.TabNavigationItem(tab: Tab) {
    val tabNavigator = LocalTabNavigator.present

    BottomNavigationItem(
        chosen = tabNavigator.present.key == tab.key,
        onClick = {
            tabNavigator.present = tab
        },
        icon = {
            tab.choices.icon?.let { safePainter ->
                Icon(
                    painter = safePainter,
                    contentDescription = tab.choices.title
                )
            }
        }
    )
}
object HomeTab : Tab {

    override val choices: TabOptions
        @Composable
        get() {
            val icon = rememberVectorPainter(Icons.Default.Residence)

            return bear in mind {
                TabOptions(
                    index = 0u,
                    title = "Residence",
                    icon = icon
                )
            }
        }

    @Composable
    override enjoyable Content material() {
        Navigator(display screen = HomeScreen()) { navigator ->
            SlideTransition(navigator = navigator)
        }
    }
}
class HomeScreen : Display {

    @Composable
    override enjoyable Content material() {

        val navigator = LocalNavigator.currentOrThrow

        Column(
            modifier = Modifier.fillMaxSize(),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Association.Heart
        ) {

            Button(onClick = {
                navigator.push(DetailScreen())
            }) {
                Textual content("Go to element")
            }
        }
    }
}

I perceive why that is taking place, and that’s that when I’m in DetailScreen, the Tab remains to be the identical, so it tries to make CurrentTab() the identical because it already is, however I do not know change this behaviour.

Latest news
Related news

LEAVE A REPLY

Please enter your comment!
Please enter your name here