Jetpack Compose - Navigation - Scaffold + NavHost not workin

Question

所以我试图创建一个应用程序与Jetpack撰写。我有一个屏幕功能，其中包含一个脚手架没有顶部的应用程序栏，一个底部的导航栏和一个浮动的动作按钮设置到底部栏。

然而，当我在脚手架的内容中添加一个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时的样子。该图像中的框是无法绘制的底部栏，因为每个框都可以点击，将我带到底部栏，底部导航项，图标等。有人知道这里发生了什么，我能做些什么来解决它吗?由于

编辑:我想到的一件事是改变'选定'布尔值在乐趣的底部栏->BottomNavigationItem总是为true，只是为了看看null值是否会影响它，但这并没有改变任何东西。

Answer 1

预览不支持ViewModels创建。因为，NavHost创建视图模型，做错误。所以我所做的是预览脚手架和一些屏幕，我分离了脚手架的内容。

的例子:

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

On 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)
}
}

Answer 2

原来我的工作室主题隐藏了错误通知。更改主题后显示

. lang。

预览中不支持ViewModels创建

所以我想我需要敲击我的手机来测试。