導覽匣

導覽匣元件是滑入式選單，可讓使用者前往應用程式的各個部分。使用者只要從側邊滑動或輕觸選單圖示即可啟動。

請考慮以下三種實作導覽匣的用途：

• 內容整理：讓使用者切換不同類別，例如在新聞或網誌應用程式中。
• 帳戶管理：透過使用者帳戶管理應用程式中的帳戶設定和個人資料部分。
• 功能探索：在單一選單中整理多項功能與設定，有助於使用者在複雜的應用程式中探索及存取功能。

Material Design 提供兩種導覽匣類型：

• 標準：在畫面中與其他內容共用空間。
• 強制回應：顯示在畫面中其他內容的上方。

範例

您可以使用 ModalNavigationDrawer 可組合項實作導覽匣。

請使用 drawerContent 位置提供 ModalDrawerSheet，並提供導覽匣內容，如以下範例所示：

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            Text("Drawer title", modifier = Modifier.padding(16.dp))
            Divider()
            NavigationDrawerItem(
                label = { Text(text = "Drawer Item") },
                selected = false,
                onClick = { /*TODO*/ }
            )
            // ...other drawer items
        }
    }
) {
    // Screen content
}
MaterialLayoutSnippets.kt

ModalNavigationDrawer 可接受一些額外的導覽匣參數。舉例來說，您可以使用 gesturesEnabled 參數來切換導覽匣是否針對拖曳事件做出回應，如以下範例所示：

ModalNavigationDrawer(
    drawerContent = {
        ModalDrawerSheet {
            // Drawer contents
        }
    },
    gesturesEnabled = false
) {
    // Screen content
}
MaterialLayoutSnippets.kt

控制項行為

如要控制導覽匣的開啟和關閉方式，請使用 DrawerState。您應使用 drawerState 參數將 DrawerState 傳遞至 ModalNavigationDrawer。

DrawerState 提供 open 和 close 函式的存取權，以及與目前導覽匣狀態相關的屬性。這些暫停函式需要 CoroutineScope，您可以使用 rememberCoroutineScope 進行例項化。也可以呼叫暫停函式來回應 UI 事件。

val drawerState = rememberDrawerState(initialValue = DrawerValue.Closed)
val scope = rememberCoroutineScope()
ModalNavigationDrawer(
    drawerState = drawerState,
    drawerContent = {
        ModalDrawerSheet { /* Drawer content */ }
    },
) {
    Scaffold(
        floatingActionButton = {
            ExtendedFloatingActionButton(
                text = { Text("Show drawer") },
                icon = { Icon(Icons.Filled.Add, contentDescription = "") },
                onClick = {
                    scope.launch {
                        drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }
            )
        }
    ) { contentPadding ->
        // Screen content
    }
}
MaterialLayoutSnippets.kt