Jetpack撰写-导航-脚手架NavHost不工作

Question

所以我试图用Jetpack Compose创建一个应用程序。我有一个屏幕功能，它包含一个没有顶部应用程序栏的脚手架，一个用于导航的底部栏和一个设置在底部栏中的浮动操作按钮。这一切都很好。

但是，当我将NavHost添加到脚手架的内容时，整个事情就停止了工作。没有NavHost，一切都很好，只是内容是屏幕的可组合功能。我尝试了不同数量的NavHost可组合位置，不同的填充值都无济于事。

没有NavHost它看起来像什么（即我希望它看起来如何）

代码：

sealed class Screen(val route: String, @DrawableRes val iconId: Int){
    object Home         : Screen("home", R.drawable.ic_home_24px)
    object Stats        : Screen("stats", R.drawable.ic_stats_icon)
    object Add          : Screen("add", R.drawable.ic_add_24px)
    object Programs     : Screen("programs", R.drawable.ic_programs_icon)
    object Exercises    : Screen("exercises", R.drawable.ic_exercises_icon)
}

@ExperimentalFoundationApi
@Preview
@Composable
fun Screen(){
    val navController = rememberNavController()
    Scaffold(
        backgroundColor = OffWhite,
        bottomBar = {
            BottomBar(navController = navController)
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {},
                shape = CircleShape,
                backgroundColor = Blue
            ) {
                Icon(
                    painter = painterResource(id = R.drawable.ic_add_24px),
                    contentDescription = "Add",
                    tint = OffWhite,
                    modifier = Modifier
                        .padding(12.dp)
                        .size(32.dp)
                )
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,

    ) {
        HomeScreen()
//        NavHost(
//            navController = navController,
//            startDestination = Screen.Home.route
//        ){
//            composable(Screen.Home.route){ HomeScreen() }
//            composable(Screen.Stats.route){ HomeScreen() }
//            composable(Screen.Programs.route){ HomeScreen() }
//            composable(Screen.Exercises.route){ HomeScreen() }
//        }
    }
}


@Composable
fun BottomBar(
    navController : NavController
){
    val items = listOf(
        Screen.Home,
        Screen.Stats,
        Screen.Add,
        Screen.Programs,
        Screen.Exercises
    )
    BottomAppBar(
        backgroundColor = OffWhite,
        cutoutShape = CircleShape,
        content = {
            BottomNavigation(
                backgroundColor = OffWhite,
                contentColor = OffWhite,
                modifier = Modifier
                    .height(100.dp)
            ) {
                val navBackStackEntry by navController.currentBackStackEntryAsState()
                val currentDestination = navBackStackEntry?.destination
                items.forEach { screen ->
                    val selected = currentDestination?.hierarchy?.any { it.route == screen.route } == true
                    BottomNavigationItem(
                        icon = {
                            val iconSize = if (selected) 32.dp else 20.dp
                            Icon(
                                painter = painterResource(id = screen.iconId),
                                contentDescription = screen.route,
                                tint = Blue,
                                modifier = Modifier
                                    .padding(12.dp)
                                    .size(iconSize)
                            )
                        },
                        selected = selected,
                        onClick = {
                            //Navigate to selected screen
                            navController.navigate(screen.route) {
                                //Pop all from stack
                                popUpTo(navController.graph.findStartDestination().id){
                                    saveState = true
                                }
                                //Avoid multiple copies of same screen on stack
                                launchSingleTop = true
                                //Restore state when reselecting a previously selected item
                                restoreState = true
                            }
                        },
                        alwaysShowLabel = false
                    )
                }
            }
        }
    )
}

它与NavHost的样子。该图像中的框是无法绘制的底部栏，因为可以单击每个框，这将我带到底部栏，底部导航项目，图标等。任何人都知道这里发生了什么，我能做些什么来解决这个问题？谢谢

编辑：我想到的一件事是在有趣的BottomBar中更改“选定”布尔值-

Answer 1

事实证明，我的工作室主题隐藏了错误通知。更改主题后，它说

java.lang.IllegalStateException：预览版不支持创建 ViewModels

所以我想我需要在手机中敲打它来测试。

Answer 2

错误消息显示预览不支持视图模型创建。由于NavHost创建视图模型，因此会出错。因此，我所做的是在某种程度上预览脚手架和一些屏幕，我将脚手架的内容分开。

例：

@Composable
fun MainApp(
    navController: NavController,
    content: @Composable (PaddingValues) -> Unit
) {
    StoreTheme {
        Scaffold(
            bottomBar = { BottomAppNavigationBar(navController) },
            content = content
        )
    }
}

在Real App上:

...

val navController = rememberNavController()
MainApp(navController) { innerPadding ->
    NavHost(
        navController = navController,
        startDestination = BottomNavMenu.Screen1.route,
        modifier = Modifier.padding(innerPadding)
    ) {
        composable(...) { Screen1... }
        composable(...) { Screen2... }
    }
}
...

预览：

@Preview(showBackground = true)
@Composable
fun MainAppPreview() {
    val navController = rememberNavController()
    
    MainApp(navController) {
        Screen1(navController)
    }
}