Używanie wstawek Material 3

Aby ułatwić korzystanie, wiele wbudowanych elementów kompozycyjnych Material 3 (androidx.compose.material3) samodzielnie obsługuje dopełnienia na podstawie tego, jak elementy kompozycyjne są umieszczane w aplikacji zgodnie ze specyfikacjami Material.

Elementy kompozycyjne obsługujące dopełnienia

Poniżej znajdziesz listę komponentów Material , które automatycznie obsługują dopełnienia.

Paski aplikacji

Kontenery treści

Scaffold

Domyślnie Scaffold udostępnia dopełnienia jako parametr PaddingValues, którego możesz używać. Scaffold nie stosuje dopełnień do treści. Odpowiadasz za to Ty. Aby na przykład użyć tych dopełnień w przypadku elementu LazyColumn wewnątrz elementu 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
    ) {
        // ..
    }
}

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

Użycie parametru PaddingValues w elemencie Scaffold zwykle wystarcza, aby odsunąć interfejs od interfejsu systemowego i wycięć na ekranie. Jeśli używasz elementu Scaffold, unikaj stosowania dodatkowych metod obsługi dopełnień, takich jak linijki, modyfikatory paddingu czy modyfikatory rozmiaru dopełnienia, aby nie stosować zbyt dużego paddingu w interfejsie.

Zastępowanie domyślnych dopełnień

Aby skonfigurować działanie elementu kompozycyjnego, możesz zmienić parametr windowInsets przekazywany do elementu kompozycyjnego. Ten parametr może być innym typem dopełnienia okna, które ma być zastosowane, lub może być wyłączony przez przekazanie pustej instancji: WindowInsets(0, 0, 0, 0).

Aby na przykład wyłączyć obsługę dopełnień w przypadku elementu LargeTopAppBar, ustaw parametr windowInsets na pustą instancję:

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