Układ tabeli siatki

Ikona oceny 4 gwiazdek

Ten przepis pokazuje, jak interfejs API Grid poprawia czytelność kodu w porównaniu z tradycyjnymi strukturami zagnieżdżonymi. Konfigurując ścieżki o automatycznym rozmiarze, możesz utworzyć siatkę, która dynamicznie dostosowuje się do szerokości i wysokości komórki na podstawie wewnętrznego rozmiaru komponentów tekstowych.

W tym przepisie utworzysz tabelę za pomocą interfejsu API Grid.

Tabela 1. Porównanie funkcji interfejsów API FlexBox i Grid
Układ Leniwe ładowanie Zawijanie wierszy Aktualizacja układu dynamicznego
FlexBox 1D Nie Tak Tak
Grid 2D Nie Nie Tak

Sprawdzone metody

Użyj funkcji kompozycyjnej Grid, aby poprawić czytelność i łatwość obsługi tabeli. Grid zapewnia precyzyjną kontrolę nad wymiarami i wyrównaniem kolumn we wszystkich wierszach bez konieczności ręcznego synchronizowania szerokości.

Składniki

  • Grid: układ kompozycyjny, który umieszcza elementy w dwuwymiarowej siatce. Konfiguracja układu jest określona w parametrze lambda config, a elementy treści interfejsu są zadeklarowane w parametrze lambda content.
  • GridTrackSize.Auto: określa automatyczne określanie rozmiaru ścieżki w konfiguracji siatki na podstawie rozmiaru wewnętrznego treści, np. column(GridTrackSize.Auto) i row(GridTrackSize.Auto).
  • gap(): konfiguruje odstępy między wierszami i kolumnami w GridConfigurationScope, np. gap(row = 8.dp, column = 16.dp).

Kroki

Utwórz wielokolumnową tabelę porównawczą, używając jednego układu Grid z automatycznym wyrównaniem kolumn i rozmiarem ścieżki dla wszystkich elementów.

1. Liczenie wierszy i kolumn siatki w celu określenia rozmiarów ścieżek

Najpierw policz kolumny i wiersze, aby określić rozmiar ścieżek:

  • Kolumny: liczba porównywanych atrybutów plus 1 kolumna na nazwę produktu.
  • Wiersze: liczba porównywanych elementów plus 1 wiersz nagłówka.

W przypadku tego przepisu, który porównuje 2 komponenty (FlexBox i Grid) pod kątem 4 atrybutów, potrzebujesz 5 kolumn i 3 wierszy.

2. Implementowanie tabeli porównawczej za pomocą siatki

Utwórz element kompozycyjny TableInGrid, który używa Grid do rozmieszczania elementów tabeli. Wywołaj funkcje column i row wewnątrz funkcji lambda config, aby określić rozmiary ścieżek, i ustaw odstępy między komórkami za pomocą gap(). Ponieważ tekst ma rozmiar wewnętrzny, GridTrackSize.Auto automatycznie dopasowuje rozmiar kolumn i wierszy do ich zawartości.

Wewnątrz funkcji lambda content umieść nagłówki i dane tabeli. Grid automatycznie obsługuje rozmieszczenie i wyrównanie wszystkich komórek:

@Composable
fun TableInGrid(
    modifier: Modifier = Modifier,
) {
    Grid(
        config = {
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            column(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            row(GridTrackSize.Auto)
            gap(row = 8.dp, column = 16.dp)
        },
        modifier = modifier,
    ) {
        // Table Header
        Text(text = "", fontWeight = FontWeight.Bold)
        Text(text = "Layout", fontWeight = FontWeight.Bold)
        Text(text = "Lazy loading", fontWeight = FontWeight.Bold)
        Text(text = "Soft wrap", fontWeight = FontWeight.Bold)
        Text(text = "Dynamic layout update", fontWeight = FontWeight.Bold)

        // FlexBox Row
        Text(text = "FlexBox", fontWeight = FontWeight.Bold)
        Text(text = "1D")
        Text(text = "No")
        Text(text = "Yes")
        Text(text = "Yes")

        // Grid Row
        Text(text = "Grid", fontWeight = FontWeight.Bold)
        Text(text = "2D")
        Text(text = "No")
        Text(text = "No")
        Text(text = "Yes")
    }
}

Wyniki

Masz teraz przejrzystą, dwuwymiarową tabelę porównawczą z automatycznym wyrównaniem kolumn i odstępami między komórkami.

Rysunek 1. Tabela porównawcza z użyciem Grid.

Dodatkowe materiały