建構自動調整導覽功能

大多數應用程式都有幾個頂層目的地，可透過 應用程式的主要導覽 UI。使用精簡視窗，例如標準手機 但目的地通常顯示在 視窗底部。在展開的視窗中，例如 但應用程式旁的導覽邊欄通常是更好的選擇，因為 只要按住左右兩側，就能更輕鬆地使用導覽控制項 完整連結

NavigationSuiteScaffold 可簡化轉換程序 顯示適當的導覽 UI 可組合項，藉此切換導覽 UI 根據WindowSizeClass。這包括動態管理 在執行階段視窗大小變更期間變更 UI。預設行為是 顯示下列其中一個 UI 元件：

• 導覽列 (如果寬度或高度較小，或裝置處於可用狀態)， 桌面型態
• 全方位的導覽邊欄

，瞭解如何調查及移除這項存取權。

新增依附元件

NavigationSuiteScaffold是 Material3 自動調整導覽套件 資源庫。在應用程式的 build.gradle 檔案中新增程式庫的依附元件 或模組：

implementation("androidx.compose.material3:material3-adaptive-navigation-suite")

implementation 'androidx.compose.material3:material3-adaptive-navigation-suite'

製作鷹架

NavigationSuiteScaffold 的兩個主要部分是導覽套件項目 以及所選目的地的內容您可以直接定義 可組合項中的導覽套件項目，但通常必須定義這些項目 而在列舉中：

enum class AppDestinations(
    @StringRes val label: Int,
    val icon: ImageVector,
    @StringRes val contentDescription: Int
) {
    HOME(R.string.home, Icons.Default.Home, R.string.home),
    FAVORITES(R.string.favorites, Icons.Default.Favorite, R.string.favorites),
    SHOPPING(R.string.shopping, Icons.Default.ShoppingCart, R.string.shopping),
    PROFILE(R.string.profile, Icons.Default.AccountBox, R.string.profile),
}
SampleNavigationSuiteScaffold.kt

如要使用 NavigationSuiteScaffold，您必須追蹤目前的目的地， 使用 rememberSaveable 即可：

var currentDestination by rememberSaveable { mutableStateOf(AppDestinations.HOME) }
SampleNavigationSuiteScaffold.kt

在以下範例中，navigationSuiteItems 參數 (類型) NavigationSuiteScope 使用 item 函式 定義個別目的地的導覽 UI。目的地 UI 為 用於導覽列、邊欄和導覽匣如要建立導覽項目 迴圈 AppDestinations (如前程式碼片段所定義)：

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it }
            )
        }
    }
) {
    // TODO: Destination content.
}
SampleNavigationSuiteScaffold.kt

在目的地內容 lambda 中，使用 currentDestination 值： 決定要顯示的 UI如果您在應用程式中使用導覽程式庫，請使用該程式庫 這裡就會顯示適當的目的地陳述式能滿足您的需求：

NavigationSuiteScaffold(
    navigationSuiteItems = { /*...*/ }
) {
    // Destination content.
    when (currentDestination) {
        AppDestinations.HOME -> HomeDestination()
        AppDestinations.FAVORITES -> FavoritesDestination()
        AppDestinations.SHOPPING -> ShoppingDestination()
        AppDestinations.PROFILE -> ProfileDestination()
    }
}
SampleNavigationSuiteScaffold.kt

變更色彩

NavigationSuiteScaffold 會建立整個區域的 Surface 鷹架式通常是整個視窗而且還有鷹架 繪製特定導覽 UI，例如 NavigationBar。 介面和導覽 UI 都會使用應用程式 主題，但您可以覆寫主題值。

containerColor 參數會指定途徑的顏色。預設 即色彩配置的背景顏色。contentColor 參數 會指定該表面的內容顏色。預設值為「on」顏色 任何 containerColor 指定的值。舉例來說，如果 containerColor 使用 background 顏色，而 contentColor 會使用 onBackground 顏色。 請參閱「Compose 中的 Material Design 3 主題設定」 ，進一步瞭解色彩系統的運作方式。覆寫這些值時 使用主題中定義的值，讓應用程式支援深色和淺色顯示 模式：

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    containerColor = MaterialTheme.colorScheme.primary,
    contentColor = MaterialTheme.colorScheme.onPrimary,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

導覽 UI 繪製在 NavigationSuiteScaffold 介面之前。 UI 顏色的預設值是由 NavigationSuiteDefaults.colors()，但你 也可以覆寫這些值舉例來說，如果要讓圖片的背景 導覽列要設為透明，但其他值是預設值 覆寫 navigationBarContainerColor：

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    navigationSuiteColors = NavigationSuiteDefaults.colors(
        navigationBarContainerColor = Color.Transparent,
    )
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

最後，您可以自訂導覽 UI 中的每個項目。呼叫 item 函式，您可以傳入 NavigationSuiteItemColors。類別會指定 導覽列、導覽邊欄和導覽項目的顏色 導覽匣。也就是說，每種導覽 UI 類型中可以採用相同的顏色。 或根據需求變更顏色定義 NavigationSuiteScaffold 層級：讓所有項目使用相同的物件例項 呼叫 NavigationSuiteDefaults.itemColors() 函式，只覆寫值 您想要變更的項目：

val myNavigationSuiteItemColors = NavigationSuiteDefaults.itemColors(
    navigationBarItemColors = NavigationBarItemDefaults.colors(
        indicatorColor = MaterialTheme.colorScheme.primaryContainer,
        selectedIconColor = MaterialTheme.colorScheme.onPrimaryContainer
    ),
)

NavigationSuiteScaffold(
    navigationSuiteItems = {
        AppDestinations.entries.forEach {
            item(
                icon = {
                    Icon(
                        it.icon,
                        contentDescription = stringResource(it.contentDescription)
                    )
                },
                label = { Text(stringResource(it.label)) },
                selected = it == currentDestination,
                onClick = { currentDestination = it },
                colors = myNavigationSuiteItemColors,
            )
        }
    },
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

自訂導覽類型

NavigationSuiteScaffold 的預設行為會變更導覽 UI 根據視窗大小 類別。不過， 可能需要覆寫這個行為舉例來說，如果您的應用程式會顯示 一個大型動態饋給內容窗格，應用程式可以使用固定導覽介面 用於展開視窗的導覽匣，但仍舊回復成 精簡和中等視窗大小類別：

val adaptiveInfo = currentWindowAdaptiveInfo()
val customNavSuiteType = with(adaptiveInfo) {
    if (windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED) {
        NavigationSuiteType.NavigationDrawer
    } else {
        NavigationSuiteScaffoldDefaults.calculateFromAdaptiveInfo(adaptiveInfo)
    }
}

NavigationSuiteScaffold(
    navigationSuiteItems = { /* ... */ },
    layoutType = customNavSuiteType,
) {
    // Content...
}
SampleNavigationSuiteScaffold.kt

其他資源

請參閱 Material Design 指南：

• 導覽列
• 導覽邊欄
• 導覽匣

請參閱下列 androidx.compose.material3 程式庫元件：

• NavigationBar
• NavigationRail
• ModalNavigationDrawer
• PermanentNavigationDrawer