Google używa technologii AI do tłumaczenia treści na Twój preferowany język. Tłumaczenia wygenerowane przez AI mogą zawierać błędy.

Konfigurowanie wstawek okien

Gdy Activity przejmie kontrolę nad obsługą wszystkich odcięć, możesz użyć interfejsów API Compose, aby sprawdzić, czy zawartość nie jest zasłonięta, a elementy interaktywne nie nakładają się na interfejs systemu. Te interfejsy API synchronizują też układ aplikacji ze zmianami wstawki.

Obsługa wcięć za pomocą modyfikatorów dopełnienia lub rozmiaru

Na przykład jest to najbardziej podstawowa metoda stosowania wstawionych elementów do treści całej aplikacji:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    enableEdgeToEdge()

    setContent {
        Box(Modifier.safeDrawingPadding()) {
            // the rest of the app
        }
    }
}InsetsSnippets.kt

Ten fragment kodu stosuje wstawki okna safeDrawing jako dopełnienie wokół całej zawartości aplikacji. Dzięki temu elementy interaktywne nie nakładają się na interfejs systemu, ale oznacza to też, że żadna część aplikacji nie będzie rysowana za interfejsem systemu, aby uzyskać efekt od krawędzi do krawędzi. Aby w pełni wykorzystać całe okno, musisz dostosować miejsca, w których stosowane są wstawki, na poszczególnych ekranach lub komponentach.

Wszystkie te typy wstawek są animowane automatycznie za pomocą animacji IME przeniesionych do interfejsu API 21. W rezultacie wszystkie układy, które korzystają z tych wcięć, są też automatycznie animowane, gdy zmieniają się wartości wcięć.

Istnieją 3 sposoby obsługi wcięć w celu dostosowania układów funkcji kompozycyjnych:

rulers
modyfikatory dopełnienia
modyfikatory rozmiaru wstawki

Modyfikatory dopełnienia

Modifier.windowInsetsPadding(windowInsets: WindowInsets) stosuje podane wstawki okna jako dopełnienie, działając tak samo jak Modifier.padding. Na przykład Modifier.windowInsetsPadding(WindowInsets.safeDrawing) stosuje bezpieczne obszary rysowania jako dopełnienie ze wszystkich 4 stron.

Dostępnych jest też kilka wbudowanych metod przydatnych w przypadku najczęstszych typów wcięć. Modifier.safeDrawingPadding() to jedna z takich metod, która odpowiada Modifier.windowInsetsPadding(WindowInsets.safeDrawing). W tabeli poniżej znajdziesz wbudowane modyfikatory dopełnienia i typ WindowInsets, który stosuje każdy z nich:

`Modifier.safeDrawingPadding()`	`WindowInsets.safeDrawing`
`Modifier.safeGesturesPadding()`	`WindowInsets.safeGestures`
`Modifier.safeContentPadding()`	`WindowInsets.safeContent`
`Modifier.statusBarsPadding()`	`WindowInsets.statusBars`
`Modifier.navigationBarsPadding()`	`WindowInsets.navigationBars`
`Modifier.captionBarPadding()`	`WindowInsets.captionBar`
`Modifier.systemBarsPadding()`	`WindowInsets.systemBars`
`Modifier.imePadding()`	`WindowInsets.ime`
`Modifier.systemGesturesPadding()`	`WindowInsets.systemGestures`
`Modifier.mandatorySystemGesturesPadding()`	`WindowInsets.mandatorySystemGestures`
`Modifier.displayCutoutPadding()`	`WindowInsets.displayCutout`
`Modifier.waterfallPadding()`	`WindowInsets.waterfall`

Informacje o tym, co obejmuje każdy typ wstawki, znajdziesz w artykule Wstawki okna.

Modyfikatory rozmiaru wstawki

Te modyfikatory stosują określoną liczbę odcięć okna, ustawiając rozmiar komponentu na rozmiar odcięć:

`Modifier.windowInsetsStartWidth(windowInsets: WindowInsets)`	Stosuje początkową stronę windowInsets jako szerokość (np. `Modifier.width`)
`Modifier.windowInsetsEndWidth(windowInsets: WindowInsets)`	Stosuje końcową stronę windowInsets jako szerokość (np. `Modifier.width`)
`Modifier.windowInsetsTopHeight(windowInsets: WindowInsets)`	Stosuje górną stronę windowInsets jako wysokość (np. `Modifier.height`)
`Modifier.windowInsetsBottomHeight(windowInsets: WindowInsets)`	Stosuje dolną stronę windowInsets jako wysokość (np. `Modifier.height`)

Te modyfikatory są szczególnie przydatne do określania rozmiaru elementu Spacer, który zajmuje miejsce wstawki:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}InsetsSnippets.kt

Wykorzystanie wstawki

Modyfikatory dopełnienia wstawki (windowInsetsPadding i funkcje pomocnicze, takie jak safeDrawingPadding) automatycznie wykorzystują część wstawek, które są stosowane jako dopełnienie. W głębszych warstwach drzewa kompozycji zagnieżdżone modyfikatory dopełnienia i rozmiaru wstawek wiedzą, że część wstawek została już wykorzystana przez zewnętrzne modyfikatory dopełnienia wstawek, i unikają wielokrotnego używania tej samej części wstawek, co spowodowałoby powstanie zbyt dużej ilości dodatkowego miejsca.

Modyfikatory rozmiaru wstawek unikają też używania tej samej części wstawek więcej niż raz, jeśli wstawki zostały już wykorzystane. Ponieważ jednak bezpośrednio zmieniają swój rozmiar, nie wykorzystują wcięć.

W rezultacie zagnieżdżanie modyfikatorów dopełnienia automatycznie zmienia ilość dopełnienia stosowanego do każdego elementu kompozycyjnego.

Wróćmy do poprzedniego przykładu z LazyColumn. Rozmiar LazyColumn jest zmieniany przez modyfikator imePadding. Wewnątrz elementu LazyColumn ostatni element ma rozmiar odpowiadający wysokości dolnej części pasków systemowych:

LazyColumn(
    Modifier.imePadding()
) {
    // Other content
    item {
        Spacer(
            Modifier.windowInsetsBottomHeight(
                WindowInsets.systemBars
            )
        )
    }
}InsetsSnippets.kt

Gdy edytor IME jest zamknięty, imePadding() nie stosuje dopełnienia. W rezultacie nie są wykorzystywane żadne wstawki, a wysokość elementu Spacer odpowiada dolnym paskom systemowym.

Gdy otworzy się edytor IME, jego wstawki zostaną animowane, aby dopasować się do jego rozmiaru, a modyfikator imePadding() zacznie stosować dolne dopełnienie, aby zmienić rozmiar elementu LazyColumn podczas otwierania edytora IME. Gdy modyfikator imePadding() zaczyna stosować dopełnienie dolne, zaczyna też wykorzystywać tę ilość wcięć. Dlatego wysokość elementu Spacer zaczyna się zmniejszać, ponieważ część odstępów dla pasków systemowych została już zastosowana przez modyfikator imePadding(). Gdy modyfikator imePadding() stosuje dopełnienie dolne, które jest większe niż paski systemowe, wysokość Spacer wynosi zero.

Gdy edytor IME się zamyka, zmiany zachodzą w odwrotnej kolejności: Spacer rozszerza się od zerowej wysokości, ponieważ imePadding() stosuje mniejsze dopełnienie niż dolne paski systemowe. Na koniec, gdy klawiatura ekranowa zostanie całkowicie ukryta, wysokość Spacer będzie odpowiadać wysokości pasków systemowych.

Rysunek 2. Kolumna Lazy od krawędzi do krawędzi z TextField.

To zachowanie jest możliwe dzięki komunikacji między wszystkimi modyfikatorami windowInsetsPadding i można na nie wpływać na kilka innych sposobów.

Modifier.consumeWindowInsets(insets: WindowInsets) również wykorzystuje wstawki w taki sam sposób jak Modifier.windowInsetsPadding, ale nie stosuje ich jako dopełnienia. Jest to przydatne w połączeniu z modyfikatorami rozmiaru wcięć, aby wskazać elementom nadrzędnym, że określona liczba wcięć została już wykorzystana:

Column(Modifier.verticalScroll(rememberScrollState())) {
    Spacer(Modifier.windowInsetsTopHeight(WindowInsets.systemBars))

    Column(
        Modifier.consumeWindowInsets(
            WindowInsets.systemBars.only(WindowInsetsSides.Vertical)
        )
    ) {
        // content
        Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
    }

    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.systemBars))
}InsetsSnippets.kt

Modifier.consumeWindowInsets(paddingValues: PaddingValues) działa bardzo podobnie do wersji z argumentem WindowInsets, ale przyjmuje dowolny argument PaddingValues. Jest to przydatne do informowania elementów podrzędnych, gdy dopełnienie lub odstępy są zapewniane przez inny mechanizm niż modyfikatory dopełnienia, np. zwykły Modifier.padding lub elementy dystansowe o stałej wysokości:

Column(Modifier.padding(16.dp).consumeWindowInsets(PaddingValues(16.dp))) {
    // content
    Spacer(Modifier.windowInsetsBottomHeight(WindowInsets.ime))
}InsetsSnippets.kt

W przypadkach, gdy potrzebne są nieprzetworzone wstawki okna bez wykorzystania, użyj bezpośrednio wartości WindowInsets lub użyj WindowInsets.asPaddingValues(), aby zwrócić PaddingValues wstawek, na które nie ma wpływu wykorzystanie. Jednak ze względu na poniższe zastrzeżenia, jeśli to możliwe, używaj modyfikatorów dopełnienia i rozmiaru odcięć okna.

Wstawki i fazy Jetpack Compose

Compose używa podstawowych interfejsów API AndroidX do aktualizowania i animowania wstawek, które korzystają z podstawowych interfejsów API platformy zarządzających wstawkami. Ze względu na to zachowanie platformy dopełnienia mają specjalną relację z fazami Jetpack Compose.

Wartość wstawki jest aktualizowana po fazie kompozycji, ale przed fazą układu. Oznacza to, że odczytanie wartości wcięć w kompozycji zwykle używa wartości wcięć, która jest opóźniona o jedną klatkę. Wbudowane modyfikatory opisane na tej stronie zostały zaprojektowane tak, aby opóźniać użycie wartości wcięć do fazy układu, co gwarantuje, że wartości wcięć będą używane w tej samej klatce, w której są aktualizowane.

Wstecz

Wstawki okna

Dalej

Korzystanie z animacji IME na klawiaturze