Układ tabeli siatki

Ikona oceny czterech gwiazdek

Z tego przepisu dowiesz się, jak interfejs Grid API 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 Grid API.

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

Sprawdzone metody

Użyj komponentu Grid, aby poprawić czytelność i łatwość utrzymania tabeli. Grid zapewnia precyzyjną kontrolę nad wymiarami kolumn i wyrównaniem we wszystkich wierszach bez ręcznej synchronizacji szerokości.

Składniki

  • Grid: komponent układu, który umieszcza elementy w siatce dwuwymiarowej. Konfiguracja układu jest określona w parametrze lambda config, a elementy treści interfejsu są deklarowane w parametrze lambda content.
  • GridTrackSize.Auto: określa automatyczne określanie rozmiaru ścieżki w konfiguracji siatki na podstawie wewnętrznego rozmiaru 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ą za pomocą pojedynczego układu Grid z automatycznym wyrównaniem kolumn i określaniem rozmiaru ścieżki dla wszystkich elementów.

1. Określ rozmiary ścieżek, zliczając wiersze i kolumny siatki

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

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

W tym przepisie porównujemy 2 komponenty (FlexBox i Grid) według 4 atrybutów, więc potrzebujemy 5 kolumn i 3 wierszy.

2. Zaimplementuj tabelę porównawczą za pomocą elementu Grid

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

W lambdzie content umieść nagłówki i dane tabeli. Grid automatycznie obsługuje umieszczanie i wyrównywanie 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

Utworzono 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 elementu Grid.

Dodatkowe materiały