Как перейти к верхней панели приложения

В этом руководстве показано, как сделать так, чтобы значок навигации на верхней панели приложения выполнял навигационные действия.

Пример

В приведенном ниже фрагменте кода показано, как реализовать верхнюю панель приложения с функциональным значком навигации. В этом случае значок перенаправляет пользователя на предыдущую страницу приложения:

@Composable
fun TopBarNavigationExample(
    navigateBack: () -> Unit,
) {
    Scaffold(
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(
                        "Navigation example",
                    )
                },
                navigationIcon = {
                    IconButton(onClick = navigateBack) {
                        Icon(
                            imageVector = Icons.AutoMirrored.Filled.ArrowBack,
                            contentDescription = "Localized description"
                        )
                    }
                },
            )
        },
    ) { innerPadding ->
        Text(
            "Click the back button to pop from the back stack.",
            modifier = Modifier.padding(innerPadding),
        )
    }
}

Ключевые моменты

Обратите внимание на следующие особенности этого примера:

  • Composable-функция TopBarNavigationExample определяет параметр navigateBack типа () -> Unit.
  • Он передает navigateBack для параметра navigationIcon объекта CenterAlignedTopAppBar.

Поэтому при каждом нажатии на значок навигации в верхней части приложения вызывается метод navigateBack().

Передача функции

В этом примере в качестве значка используется стрелка назад. Таким образом, аргумент navigateBack() должен перенаправлять пользователя на предыдущую целевую страницу.

Для этого передайте вызов TopBarNavigationExample в NavController.popBackStack(). Это можно сделать при создании графа навигации. Пример:

NavHost(navController, startDestination = "home") {
    composable("topBarNavigationExample") {
        TopBarNavigationExample{ navController.popBackStack() }
    }
    // Other destinations...

Дополнительные ресурсы

Чтобы узнать, как реализовать навигацию в приложении, ознакомьтесь со следующими руководствами: