Używanie wstawek Material 3

Zadbaj o dobrą organizację dzięki kolekcji Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.

Dla ułatwienia wiele wbudowanych komponentów kompozytowych Material 3 (androidx.compose.material3) samodzielnie obsługuje wstawki na podstawie tego, jak komponenty te są umieszczane w aplikacji zgodnie ze specyfikacją Material.

Obsługa funkcji kompozycyjnych w ramce

Poniżej przedstawiamy listę komponentów Material Design, które automatycznie obsługują wstawki.

Paski aplikacji

• TopAppBar / SmallTopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: stosuje górne i poziome strony pasków systemu jako wypełnienie, ponieważ jest używane u góry okna.
• BottomAppBar: dopełnienie dołu i poziomych stron pasków systemu.

Kontenery treści

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (treści w modale paska nawigacyjnego): stosuje wewnętrzne i początkowe wcięcia do treści.
• ModalBottomSheet: zastosuj dolne wcięcia.
• NavigationBar : stosuje dolne i poziome wgłębienia.
• NavigationRail: stosuje wstawki pionowe i początkowe.

Rusztowanie

Domyślnie funkcja Scaffold udostępnia w ramach parametru paddingValues wstawki, które możesz wykorzystać. Scaffold nie stosuje wstawek do treści; ta odpowiedzialność spoczywa na użytkowniku. Aby na przykład użyć tych wstawek z LazyColumn w ramach Scaffold:

Scaffold { innerPadding ->
    // innerPadding contains inset information for you to use and apply
    LazyColumn(
        // consume insets as scaffold doesn't do it by default
        modifier = Modifier.consumeWindowInsets(innerPadding),
        contentPadding = innerPadding
    ) {
        // ..
    }
}
InsetsSnippets.kt

Ten film pokazuje LazyColumn w ramach Scaffold z wyświetlaniem od krawędzi do krawędzi wyłączonym i włączonym:

Zastępowanie domyślnych wstawek

Aby skonfigurować zachowanie komponentu, możesz zmienić parametr windowInsets przekazywany do niego. Ten parametr może być innym typem wstawionego okna, który ma być zastosowany, lub może być wyłączony przez podanie pustej instancji: WindowInsets(0, 0, 0, 0).

Aby na przykład wyłączyć obsługę wstawionych elementów w LargeTopAppBar, ustaw parametr windowInsets na pustą instancję:

LargeTopAppBar(
    windowInsets = WindowInsets(0, 0, 0, 0),
    title = {
        Text("Hi")
    }
)
InsetsSnippets.kt