從頂端應用程式列導覽

本指南將說明如何讓頂端應用程式列中的導覽圖示執行導覽動作。

範例

下列程式碼片段是實作頂端應用程式列 (含功能性導覽圖示) 的簡易範例。在這種情況下,圖示會將使用者帶往應用程式中的先前目的地:

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

程式碼的重點

請注意以下範例中的事項:

  • 可組合函式 TopBarNavigationExample 定義 () -> Unit 類型的參數 navigateBack
  • 它會針對 CenterAlignedTopAppBarnavigationIcon 參數傳遞 navigateBack

因此,只要使用者按一下頂層應用程式返回的導覽圖示,就會呼叫 navigateBack()

傳遞函式

本範例使用返回箭頭做為圖示。因此,navigateBack() 的引數應將使用者導向上一個目的地。

如要這麼做,請TopBarNavigationExample將呼叫傳遞給 NavController.popBackStack()。您可以在建構導覽圖時執行這項操作。例如:

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

其他資源

如要進一步瞭解如何在應用程式中導入導覽功能,請參閱下列系列指南: