Panel nawigacji

Komponent schowanka nawigacyjnej to wysuwane menu, które umożliwia użytkownikom poruszanie się po różnych sekcjach aplikacji. Mogą go aktywować, przesuwając palcem od krawędzi lub klikając ikonę menu.

Oto 3 przypadki użycia szuflady nawigacyjnej:

• Organizowanie treści: umożliwia użytkownikom przełączanie się między różnymi kategoriami, np. w aplikacjach do czytania wiadomości lub prowadzenia bloga.
• Zarządzanie kontem: w aplikacjach z kontami użytkowników udostępniaj szybkie linki do ustawień konta i sekcji profilu.
• Odkrywanie funkcji: możesz uporządkować wiele funkcji i ustawień w jednym menu, aby ułatwić użytkownikom ich znajdowanie i dostęp do nich w kompleksowych aplikacjach.

W Material Design występują 2 rodzaje paneli nawigacyjnych:

• Standardowy: udostępnia przestrzeń na ekranie innym treściom.
• Okno modalne:wyświetla się nad innymi treściami na ekranie.

Przykład

Do implementowania szuflady nawigacyjnej możesz użyć kompozytu ModalNavigationDrawer.

Użyj slotu drawerContent, aby podać ModalDrawerSheet i podać zawartość szuflady, jak w tym przykładzie:

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

ModalNavigationDrawer może przyjmować kilka dodatkowych parametrów szuflady. Na przykład za pomocą parametru gesturesEnabled możesz włączyć lub wyłączyć reagowanie szuflady na przeciąganie, jak w tym przykładzie:

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

Kontrolowanie zachowania

Aby kontrolować sposób otwierania i zamykania szuflady, użyj skrótu DrawerState. Do elementu ModalNavigationDrawer należy przekazać element DrawerState za pomocą parametru drawerState.

DrawerState zapewnia dostęp do funkcji open i close, a także właściwości związanych z bieżącym stanem szuflady. Te funkcje zawieszania wymagają obiektu CoroutineScope, który można utworzyć za pomocą funkcji rememberCoroutineScope. Funkcję zawieszania możesz też wywołać w reakcji na zdarzenia interfejsu użytkownika.

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