Навигация из верхней панели приложения

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

Пример

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

@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),
        )
    }
}
AppBar.kt

Ключевые моменты кода

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

  • Составной TopBarNavigationExample определяет параметр navigateBack типа () -> Unit .
  • Он передает navigateBack для параметра navigationIcon элемента CenterAlignedTopAppBar .

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

Передать функцию

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

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

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

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

Дополнительную информацию о том, как реализовать навигацию в вашем приложении, можно найти в следующей серии руководств:

,

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

Пример

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

@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),
        )
    }
}
AppBar.kt

Ключевые моменты кода

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

  • Составной TopBarNavigationExample определяет параметр navigateBack типа () -> Unit .
  • Он передает navigateBack для параметра navigationIcon элемента CenterAlignedTopAppBar .

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

Передать функцию

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

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

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

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

Дополнительную информацию о том, как реализовать навигацию в вашем приложении, можно найти в следующей серии руководств: