Nakładki elementów interfejsu z siatką

Interfejs API Grid Jetpack Compose jest przeznaczony do strukturalnych, dwuwymiarowych układów ekranu. W przeciwieństwie do siatek lazy, które są zoptymalizowane pod kątem dużych zbiorów danych, Grid umożliwia definiowanie stałej lub elastycznej struktury układu za pomocą ścieżek (wierszy i kolumn), odstępów i obszarów siatki. Elementy umieszczasz w tej strukturze za pomocą Modifier.gridItem, co daje Ci pełną kontrolę nad pozycjonowaniem i rozmieszczaniem w kontenerze siatki.

Gdy interfejs wymaga wielu elementów w tym samym obszarze siatki lub nakładających się obszarów, takich jak nakładki plakietek, wskaźniki stanu lub karty warstwowe, niejednoznaczność współrzędnych może sprawić, że zachowanie układu będzie nieprzewidywalne. Zarządzanie głębokością nakładających się komponentów bez uciekania się do złożonego zagnieżdżania Box lub ręcznego przesunięcia współrzędnych jest niezbędne do utrzymania czystego, czytelnego kodu układu.

Sprawdzone metody

• Kolejność deklaracji: Grid jest zgodny ze standardową kolejnością zIndex opartą na kolejności deklaracji w bloku Grid. Elementy zadeklarowane później w bloku treści Grid są renderowane nad elementami zadeklarowanymi wcześniej.
• Jawna kontrola indeksu Z: użyj Modifier.zIndex, jeśli chcesz jawnie kontrolować lub zastępować domyślną kolejność rysowania nakładających się elementów.
• Nazwane obszary a nakładki elementów: używaj Grid i nazwanych obszarów, aby zdefiniować strukturę układu, ale zachowaj złożoną logikę nakładek w konkretnym elemencie gridItem, jeśli te nakładki są logicznie powiązane z tą komórką siatki.
• Celowe zakresy nakładek: podczas nakładania upewnij się, że parametry rowSpan i columnSpan są celowo ustawione dla nakładających się elementów, aby kontrolować, jaka część treści pod spodem jest zasłonięta.

Składniki

• Grid: strukturalny, dwuwymiarowy kontener układu.
• GridConfigurationScope.area: funkcja zakresu używana do definiowania nazwanych regionów i obszarów nakładki na ścieżkach siatki.
• Modifier.gridItem: modyfikator używany do umieszczania i rozciągania elementów kompozycyjnych na ścieżkach siatki lub w nazwanych obszarach siatki.
• Modifier.zIndex: modyfikator używany do jawnego kontrolowania kolejności rysowania i warstw.

Kroki

Skonfiguruj układ siatki i nazwane obszary, umieść zawartość warstwy podstawowej we współrzędnych siatki docelowej i umieść elementy nakładki w udostępnionych komórkach siatki lub nakładających się obszarach.

1. Definiowanie konfiguracji siatki

Utwórz konfigurację funkcji kompozycyjnej Grid, określając ścieżki wierszy i kolumn oraz nazwane obszary obejmujące komórki, aby zdefiniować regiony nakładki:

enum class Areas { BASE, OVERLAY }

val gridConfig: GridConfigurationScope.() -> Unit = {
    repeat(3) {
        column(GridTrackSize.Fixed(100.dp))
    }
    row(GridTrackSize.Fixed(100.dp))

    area(areaId = Areas.BASE, row = 1, column = 1, columnSpan = 2)
    // Define a named area spanning multiple columns that overlaps other cells
    area(areaId = Areas.OVERLAY, row = 1, column = 2, columnSpan = 2)
}
GridByExamples.kt

2. Umieszczanie treści podstawowych i deklarowanie nakładek

Umieść podstawowe elementy kompozycyjne w komórkach siatki za pomocą Modifier.gridItem. Grid stosuje standardową kolejność zIndex na podstawie kolejności kompozycji, więc elementy zadeklarowane później w bloku Grid są rysowane na elementach zadeklarowanych wcześniej. Podczas umieszczania nakładki w tej samej komórce lub w obszarze nakładania się zadeklaruj element kompozycyjny nakładki po elemencie podstawowym lub odwołaj się do nazwanego obszaru. Jeśli chcesz wyraźnie kontrolować lub zastąpić domyślną kolejność rysowania, możesz użyć Modifier.zIndex.

Grid(
    config = gridConfig,
) {
    // Base Layer
    TextCard("BASE", Modifier.gridItem(areaId = Areas.BASE))
    // Overlay Layer
    TextCard(
        "OVERLAY",
        Modifier.gridItem(areaId = Areas.OVERLAY),
        color = Color(0xDD4B608D)
    )
}
GridByExamples.kt

Wyniki

Elementy interfejsu nakładają się w przewidywalny sposób w strukturze siatki 2D. Dzięki standardowej kolejności deklaracji unikasz złożonych zagnieżdżonych kontenerów, zachowując jednocześnie przejrzysty, elastyczny kod układu.

Rysunek 1. Nakładające się elementy interfejsu w siatce Compose.