從頂端應用程式列導覽

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

範例

以下程式碼片段是極簡範例，說明如何實作頂端應用程式 包含功能導覽圖示的長條在此情況下，圖示會將使用者帶往 應用程式中的舊目的地：

@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 類型。
  • 它會為以下項目的 navigationIcon 參數傳遞 navigateBack： CenterAlignedTopAppBar。

因此，每當使用者返回頂端應用程式的導覽圖示時， 呼叫 navigateBack()。

傳遞函式

這個範例使用返回箭頭做為圖示。因此，對於 navigateBack() 應將使用者導向上一個目的地。

若要這麼做，請將呼叫傳遞至 TopBarNavigationExample NavController.popBackStack()。您可在此建立 導覽圖表。例如：

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

其他資源

如要進一步瞭解如何在應用程式中實作導覽功能，請參閱 下列指南：