導覽邊欄

Rails 可讓您存取在大型螢幕裝置上執行的應用程式目的地。您應使用導覽邊欄做為以下用途：

  • 需要在應用程式中任何位置皆可存取的頂層目的地
  • 三到七個主要目的地
  • 平板電腦或電腦版面配置
螢幕左側的垂直導覽列，內含四個目的地 (「所有檔案」、「近期」、「相片」和「媒體庫」)，每個目的地都有相關聯的圖示和浮動式操作按鈕。
圖 1. 包含四個目的地和懸浮動作按鈕的導覽邊欄。

本頁面說明如何在應用程式中顯示軌道，並提供相關畫面和基本導覽功能。

API 介面

使用 NavigationRail 可組合項搭配 NavigationRailItem，即可在應用程式中實作軌道。NavigationRailItem 代表軌道欄中的單一軌道項目。

NavigationRailItem 包含下列重要參數：

  • selected：判斷目前的導覽列項目是否以視覺效果加以強調。
  • onClick()：這是必要的 lambda 函式，可定義使用者點選軌道項目時要執行的動作。通常會在此處處理導覽事件、更新所選軌道項目狀態，或載入對應內容。
  • label：在導覽列項目中顯示文字。選用項目。
  • icon：在軌道項目中顯示圖示。選用項目。

範例：以軌道為基礎的導覽

以下程式碼片段會實作導覽邊欄，讓使用者在應用程式中的不同畫面之間瀏覽：

@Composable
fun NavigationRailExample(modifier: Modifier = Modifier) {
    val navController = rememberNavController()
    val startDestination = Destination.SONGS
    var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) }

    Scaffold(modifier = modifier) { contentPadding ->
        NavigationRail(modifier = Modifier.padding(contentPadding)) {
            Destination.entries.forEachIndexed { index, destination ->
                NavigationRailItem(
                    selected = selectedDestination == index,
                    onClick = {
                        navController.navigate(route = destination.route)
                        selectedDestination = index
                    },
                    icon = {
                        Icon(
                            destination.icon,
                            contentDescription = destination.contentDescription
                        )
                    },
                    label = { Text(destination.label) }
                )
            }
        }
        AppNavHost(navController, startDestination)
    }
}
Navigation.kt

重點

  • NavigationRail 會顯示垂直的列，其中包含軌道項目，每個項目都對應至 Destination。
  • val navController = rememberNavController() 會建立並記住 NavHostController 的例項，用於管理 NavHost 中的導覽。
  • var selectedDestination by rememberSaveable { mutableIntStateOf(startDestination.ordinal) } 會管理目前所選軌道項目的狀態。
    • startDestination.ordinal 會取得 Destination.SONGS 列舉項目的數字索引 (位置)。
  • 點選導覽列項目時，系統會呼叫 navController.navigate(route = destination.route) 以前往對應的畫面。
  • NavigationRailItem 的 onClick lambda 會更新 selectedDestination 狀態，以視覺方式醒目顯示已按下的軌道項目。
  • 它會呼叫 AppNavHost 可組合函式，傳遞 navController 和 startDestination，以便顯示所選畫面的實際內容。

結果

下圖顯示上一個程式碼片段的結果：

垂直導覽邊欄，包含 3 個目的地和相關圖示：歌曲、專輯和播放清單。圖示會以視覺方式指出導覽列中每個導覽按鈕的用途。每個目的地都會搭配相關圖示 (例如音符圖示代表
圖 2. 導覽列包含 3 個目的地，以及相關聯的圖示：歌曲、專輯和播放清單。

其他資源