Nakładki elementów interfejsu z siatką

Interfejs API Grid w Jetpack Compose jest przeznaczony do tworzenia strukturalnych, dwuwymiarowych układów ekranu. W przeciwieństwie do siatek leniwych, które są zoptymalizowane pod kątem dużych zbiorów danych, Grid umożliwia zdefiniowanie 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 rozciąganiem w kontenerze siatki.

Gdy interfejs wymaga wielu elementów w tym samym obszarze siatki lub w nakładających się obszarach (np. nakładek z odznakami, wskaźników stanu lub warstwowych kart), 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 ustawiania przesunięć współrzędnych jest niezbędne do zachowania przejrzystego i czytelnego kodu układu.

Sprawdzone metody

• Kolejność deklaracji: Grid stosuje standardową kolejność zIndex na podstawie kolejności deklaracji w bloku Grid. Elementy zadeklarowane później w bloku treści Grid są renderowane na wierzchu elementów zadeklarowanych wcześniej.
• Jawna kontrola z-index: jeśli chcesz jawnie kontrolować lub zastąpić domyślną kolejność rysowania nakładających się elementów, użyj Modifier.zIndex.
• Nazwany obszar a nakładki elementów: używaj Grid i nazwanych obszarów, aby zdefiniować strukturę układu, ale złożoną logikę nakładki umieszczaj w konkretnym gridItem, jeśli te nakładki są logicznie powiązane z daną komórką siatki.
• Celowe rozciąganie nakładek: podczas nakładania upewnij się, że parametry rowSpan i columnSpan są celowe, aby nakładające się elementy kontrolowały, jak duża część treści bazowej 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 w ścieżkach siatki
• Modifier.gridItem: modyfikator używany do umieszczania i rozciągania elementów kompozycyjnych w ścieżkach siatki lub w nazwanych obszarach siatki
• Modifier.zIndex: modyfikator używany do jawnego kontrolowania kolejności rysowania i podnoszenia warstw

Kroki

Skonfiguruj układ siatki i nazwane obszary, umieść treści warstwy bazowej w docelowych współrzędnych siatki i umieść elementy nakładki we wspólnych komórkach siatki lub nakładających się obszarach.

1. Zdefiniuj konfigurację siatki

Utwórz konfigurację elementu kompozycyjnego Grid, określając ścieżki wierszy i kolumn oraz nazwane obszary, które rozciągają się na 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. Umieść treści bazowe i zadeklaruj nakładki

Umieść bazowe 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 wierzchu wcześniejszych elementów. Umieszczając nakładkę w tej samej komórce lub w nakładającym się obszarze, zadeklaruj element kompozycyjny nakładki po elemencie bazowym lub odwołaj się do nazwanego obszaru. Jeśli chcesz jawnie 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 stosowaniu standardowej kolejności deklaracji możesz uniknąć złożonych zagnieżdżonych kontenerów, zachowując jednocześnie przejrzysty i elastyczny kod układu.