Табличная сетка, Табличная сетка

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

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

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

Таблица 1. Сравнение возможностей API FlexBox и Grid

	Макет	Ленивая загрузка	Мягкая обертка	Динамическое обновление макета
FlexBox	1D	Нет	Да	Да
Grid	2D	Нет	Нет	Да

Передовые методы

Используйте компонент 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).

Создайте компонент 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")
    }
}
GridByExamples.kt

Результаты

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

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

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

• Сетка в Compose
• Задать свойства контейнера