我的应用程序的导航定义如下。它包含三个屏幕。起始目的地是主屏幕,用户可以通过按浮动操作按钮导航到添加学生屏幕。
@Composable
fun SampleRoomApp(
appViewModel: AppViewModel,
modifier: Modifier = Modifier
) {
val navController = rememberNavController()
Scaffold(
topBar = {
AppTopBar(navController = navController)
},
floatingActionButton = {
ExtendedFloatingActionButton(onClick = { navController.navigate(AppDestinations.ADD_STUDENT.name) }) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add New Student",
modifier = Modifier.size(28.dp)
)
Text(text = "Add Student")
}
},
floatingActionButtonPosition = FabPosition.Center,
modifier = modifier
) { innerPadding ->
NavHost(
startDestination = AppDestinations.HOME.name,
navController = navController,
modifier = Modifier.padding(innerPadding)
) {
composable(route = AppDestinations.HOME.name) {
//
}
composable(
route = AppDestinations.STUDENT_DETAILS.name + "\\{$idArgument}",
arguments = listOf(navArgument(idArgument) { type = NavType.IntType })
) { backStackEntry ->
//
}
composable(route = AppDestinations.ADD_STUDENT.name) {
//
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar(
navController: NavController,
) {
CenterAlignedTopAppBar(
title = { Text("Sample Room App") },
navigationIcon = {
//???
if (navController.previousBackStackEntry != null) {
IconButton(
onClick = { navController.navigateUp() },
) {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Go Back"
)
}
}
}
)
}
根据我的应用程序逻辑,当我从主屏幕移动到不同的屏幕时,应该会出现箭头按钮。但当我单击 FAB 时,这种情况不会发生。请帮助我。
出现此问题的原因是,当您导航到新屏幕时,
AppTopBar
不会重新组合。要解决此问题,您可以使用状态变量在屏幕发生变化时触发重组。
这是使用
showBackButton
状态变量的代码的更新版本:
@Composable
fun SampleRoomApp(
modifier: Modifier = Modifier
) {
val navController = rememberNavController()
var showBackButton by remember { mutableStateOf(false) }
Scaffold(
topBar = {
AppTopBar(
showBackButton = showBackButton,
onBack = { navController.navigateUp() }
)
},
floatingActionButton = {
ExtendedFloatingActionButton(onClick = { navController.navigate(AppDestinations.ADD_STUDENT.name) }) {
Icon(
imageVector = Icons.Filled.Add,
contentDescription = "Add New Student",
modifier = Modifier.size(28.dp)
)
Text(text = "Add Student")
}
},
floatingActionButtonPosition = FabPosition.Center,
modifier = modifier
) { innerPadding ->
NavHost(
startDestination = AppDestinations.HOME.name,
navController = navController,
modifier = Modifier.padding(innerPadding)
) {
composable(route = AppDestinations.HOME.name) {
showBackButton = navController.previousBackStackEntry != null
}
composable(
route = AppDestinations.STUDENT_DETAILS.name + "\\{$idArgument}",
arguments = listOf(navArgument(idArgument) { type = NavType.IntType })
) { backStackEntry ->
showBackButton = navController.previousBackStackEntry != null
}
composable(route = AppDestinations.ADD_STUDENT.name) {
showBackButton = navController.previousBackStackEntry != null
}
}
}
}
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun AppTopBar(
showBackButton: Boolean = false,
onBack: () -> Unit = {},
) {
CenterAlignedTopAppBar(
title = { Text("Sample Room App") },
navigationIcon = {
//???
if (showBackButton) {
IconButton(
onClick = onBack,
) {
Icon(
imageVector = Icons.AutoMirrored.Filled.ArrowBack,
contentDescription = "Go Back"
)
}
}
}
)
}