layout - Separate content and title in Compose Multiplatform - Stack Overflow

admin管理员组

文章数量:1122832

I am making a Compose Multiplatform App and want to organize my layout based on the platform and screen size.

I would like this layout on mobile :

And this one for desktop :

But the toolbar is specific to each screen and will have a lot of interactions with its screen (search bar, filter options, layout changes) so each toolbar needs access to its screen viewModel. The problem is that with the desktop layout, the navigation is in the way, so they can't just be in the same composable.

I realised you could use 2 NavHosts (one for the toolbar, the other for the screen) with the same routes and same navController, and they are synchronized and have access to the same viewModel. Now this should work but I don't know if it's a good idea, if this may cause issues long term.

@Composable
fun App() {
    val navController = rememberNavController()
    AdaptiveNavigation(
        toolbar = {
            NavHost(
                navController = navController,
                startDestination = Route.Home
            ) {
                composable<Route.Home> {
                    // Home toolbar composable
                }

                composable<Route.Profile> {
                    // Profile toolbar composable
                }
            }
        },
        content = {
            NavHost(
                navController = navController,
                startDestination = Route.Home
            ) {
                composable<Route.Home> {
                    // Home content composable
                }

                composable<Route.Profile> {
                    // Profile content composable
                }
            }
        }
    )
}

@Composable
fun AdaptiveNavigation(
    toolbar: @Composable () -> Unit,
    content: @Composable () -> Unit
) {
    // Handle layout
}

sealed interface Route {
    @Serializable
    data object Home: Route

    @Serializable
    data object Profile: Route
}

Another idea might be to handle navigation on each route. But that prevents any animation in the navigation composable, and duplicates the layout managment.

@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = Route.Home
    ) {
        composable<Route.Home> {
            AdaptiveNavigation(
                toolbar = {
                    // Home toolbar composable
                },
                content = {
                    // Home content composable
                }
            )
        }

        composable<Route.Profile> {
            AdaptiveNavigation(
                toolbar = {
                    // Profile toolbar composable
                },
                content = {
                    // Profile content composable
                }
            )
        }
    }
}

Is one of these better than the other ? Or are they both bad and there's a better way to do this ?

本文标签： layoutSeparate content and title in Compose MultiplatformStack Overflow