Panel nawigacji

Komponent panelu nawigacji to wysuwane menu, które umożliwia użytkownikom poruszanie się do różnych sekcji aplikacji. Użytkownicy mogą je aktywować, przesuwając palcem z boku lub kliknij ikonę menu.

Rozważ te 3 przypadki użycia panelu nawigacji:

• Organizacja treści: pozwól użytkownikom przełączać się między różnymi np. w aplikacjach z wiadomościami czy blogami.
• Zarządzanie kontem: zapewnij szybkie linki do ustawień konta i profilu w aplikacjach z kontami użytkowników.
• Odkrywanie funkcji: uporządkuj wiele funkcji i ustawień w jednym w celu ułatwienia wykrywania użytkowników i uzyskiwania do nich dostępu w złożonych aplikacjach.

W stylu Material Design dostępne są 2 rodzaje szuflad nawigacji:

• Standardowy: udostępnianie miejsca na ekranie innym treściom.
• Modny: pojawia się nad innymi treściami na ekranie.

Przykład

Możesz użyć funkcji kompozycyjnej ModalNavigationDrawer, aby zaimplementować panelu nawigacji.

Wykorzystaj przedział drawerContent, aby udostępnić element ModalDrawerSheet i podać zawartość panelu, jak w tym przykładzie:

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

Funkcja ModalNavigationDrawer może przyjmować szereg dodatkowych parametrów panelu. Dla: możesz na przykład włączyć lub wyłączyć reakcję panelu na przeciągnięcia gesturesEnabled jak w tym przykładzie:

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

Zachowanie ustawień

Aby sterować sposobem otwierania i zamykania panelu, użyj narzędzia DrawerState. Zalecenia przekaż DrawerState do: ModalNavigationDrawer, używając drawerState .

DrawerState umożliwia dostęp do funkcji open i close: a także właściwości związane z bieżącym stanem panelu. Zawieszanie funkcje wymagają CoroutineScope, którego wystąpienia można utworzyć za pomocą rememberCoroutineScope Funkcje zawieszania możesz też wywołać w odpowiedzi na zdarzenia interfejsu.

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