Макет таблицы сетки

Значок оценки в четыре звезды

В этом рецепте показано, как API Grid улучшает читаемость кода по сравнению с традиционными вложенными структурами. Настроив дорожки с автоматическим размером, вы можете создать сетку, которая динамически адаптируется к ширине и высоте ячейки в зависимости от внутреннего размера ваших текстовых компонуемых объектов.

В этом рецепте вы создадите таблицу с помощью Grid API.

Таблица 1. Сравнение функций API FlexBox и Grid
Макет Отложенная загрузка Мягкий перенос Обновление динамического макета
FlexBox 1Д Нет Да Да
Grid 2D Нет Нет Да

Рекомендации

Используйте composable-функцию Grid, чтобы улучшить читаемость и удобство обслуживания таблицы. Grid позволяет точно настраивать размеры столбцов и выравнивание по всем строкам без необходимости вручную синхронизировать ширину.

Ингредиенты

  • Grid – компонуемый макет, который размещает элементы в двумерной сетке. Конфигурация макета указывается в лямбда-параметре config, а элементы контента пользовательского интерфейса объявляются в лямбда-параметре content.
  • GridTrackSize.Auto – указывает автоматический размер дорожки в конфигурации сетки на основе размера контента, например column(GridTrackSize.Auto) и row(GridTrackSize.Auto).
  • gap() – настраивает интервалы между строками и столбцами в GridConfigurationScope, например gap(row = 8.dp, column = 16.dp).

Шаги

Создайте сравнительную таблицу с несколькими столбцами, используя один макет Grid с автоматическим выравниванием столбцов и размером дорожек для всех элементов.

1. Как определить размеры полос, посчитав строки и столбцы сетки

Сначала посчитайте столбцы и строки, чтобы определить размер полос:

  • Столбцы. Количество сравниваемых атрибутов плюс один столбец для названия товара.
  • Строки. Количество сравниваемых элементов плюс одна строка заголовка.

Для этого рецепта, в котором сравниваются два компонента (FlexBox и Grid) по четырем атрибутам, вам понадобится пять столбцов и три строки.

2. Как реализовать сравнительную таблицу с помощью Grid

Создайте composable-функцию TableInGrid, которая использует Grid для размещения элементов таблицы. Вызовите функции column и row внутри лямбда-выражения config, чтобы определить размеры дорожек, и задайте интервал между ячейками с помощью gap(). Поскольку у текста есть внутренний размер, GridTrackSize.Auto автоматически подбирает размер столбцов и строк в соответствии с их содержимым.

Внутри лямбда-выражения content разместите заголовки и данные таблицы. Grid автоматически управляет размещением и выравниванием всех ячеек:

@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")
    }
}

Результаты

Вы создали простую двумерную сравнительную таблицу с автоматическим выравниванием столбцов и расстоянием между ячейками.

Рисунок 1. Сравнительная таблица с использованием Grid.

Дополнительные ресурсы