Jetpack Compose 应用程序中的后退导航问题

Question

我的应用程序的导航定义如下。它包含三个屏幕。起始目的地是主屏幕，用户可以通过按浮动操作按钮导航到添加学生屏幕。

@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 时，这种情况不会发生。请帮助我。

Answer 1

出现此问题的原因是，当您导航到新屏幕时，

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