本頁面由 Cloud Translation API 翻譯而成。

建構自動調整導覽功能

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

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

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

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

**圖 1.**`NavigationSuiteScaffold` 在精簡視窗中會顯示導覽列。

**圖 2.**`NavigationSuiteScaffold` 會在展開的視窗中顯示導覽邊欄。

新增依附元件

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

Kotlin


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

Groovy


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 程式庫元件：

支援多視窗模式

建構清單/詳細資料版面配置