Używanie wstawek Material 3

Dla ułatwienia wiele wbudowanych funkcji kompozycyjnych Material 3 (androidx.compose.material3) samodzielnie obsługuje wstawki na podstawie sposobu umieszczenia funkcji kompozycyjnych w aplikacji zgodnie ze specyfikacjami Material.

Uwaga: komponenty Material 2 (androidx.compose.material) nie obsługują automatycznie wcięć. Możesz jednak uzyskać dostęp do wstawek i zastosować je ręcznie. W androidx.compose.material 1.6.0 i nowszych wersjach użyj parametru windowInsets, aby ręcznie zastosować wcięcia w przypadku BottomAppBar, TopAppBar, BottomNavigation i NavigationRail. Podobnie użyj parametru contentWindowInsets dla Scaffold. W przeciwnym razie zastosuj wstawki ręcznie jako dopełnienie.

Funkcje kompozycyjne obsługujące wcięcia

Poniżej znajduje się lista komponentów Material Design, które automatycznie obsługują wstawki.

Paski aplikacji

• TopAppBar / CenterAlignedTopAppBar / MediumTopAppBar / LargeTopAppBar: stosuje górną i poziomą stronę pasków systemowych jako dopełnienie, ponieważ jest używany u góry okna.
• BottomAppBar: stosuje dolną i poziomą stronę pasków systemowych jako dopełnienie.

Kontenery treści

• ModalDrawerSheet / DismissibleDrawerSheet / PermanentDrawerSheet (treść w modalnym panelu nawigacji): stosuje do treści dopełnienia pionowe i początkowe.
• ModalBottomSheet: stosuje odcięcia dolne.
• NavigationBar: stosuje odcięcia dolne i poziome.
• NavigationRail: stosuje dopełnienia pionowe i początkowe.

Rusztowanie

Domyślnie Scaffold udostępnia elementy wewnętrzne jako parametr PaddingValues, który możesz wykorzystać. Scaffold nie stosuje wcięć do treści – to zadanie należy do Ciebie. Aby na przykład wykorzystać te wstawki za pomocą LazyColumn wewnątrz 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 Scaffold z wyłączonym i włączonym wyświetlaniem od krawędzi do krawędzi:

Użycie parametru PaddingValues w Scaffold zwykle wystarczy, aby odsunąć interfejs od interfejsu systemu i wycięć w ekranie. Jeśli używasz Scaffold, unikaj stosowania dodatkowych metod obsługi wcięć, takich jak linijki, modyfikatory dopełnienia czy modyfikatory rozmiaru wcięcia, aby nie dodawać zbyt dużego dopełnienia do interfejsu.

Zastąp domyślne wcięcia

Możesz zmienić parametr windowInsets przekazywany do funkcji kompozycyjnej, aby skonfigurować jej działanie. Ten parametr może być innym typem wstawki okna, którą można zastosować, lub można go wyłączyć, przekazując pustą instancję: WindowInsets(0, 0, 0, 0).

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

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