Виджет DataTable используется для отображения данных в табличном формате. Он обеспечивает удобный способ просмотра больших объемов структурированных данных.

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

дата 1

Добавление виджета DataTable

Воспроизвести

Давайте посмотрим, как добавить виджет DataTable, создав пример, который показывает список всех сотрудников компании. Вот как это выглядит:

Чтобы добавить DataTable и отобразить данные о сотрудниках, выполните следующие шаги:

  1. Сначала нажмите кнопку + Добавить виджет, перетащите виджет DataTable с вкладки Базовые элементы или добавьте его непосредственно из дерева виджетов.
  2. Он добавляет два типа предопределенных виджетов:
    1. DataTableHeader: Относится к верхней строке таблицы, в которой отображаются названия столбцов. Чтобы задать ему имя, щелкните на виджете DataTableHeader > Text, перейдите на панель свойств и дайте ему имя.
    2. Placeholder: Используется для отображения фактических данных. По умолчанию он поставляется с виджетом Text. Однако вы можете заменить его любым другим виджетом в соответствии с вашими требованиями.
  3. По умолчанию он отображает два столбца. Чтобы показать больше, выберите виджет DataTable, перейдите на панель свойств и введите желаемое количество столбцов.
  4. Если вы увеличите количество колонок, вы можете обнаружить, что колонки сжаты (особенно на мобильном устройстве с портретной ориентацией). Чтобы исправить это, перейдите на панель свойств, введите соответствующую ширину таблицы и включите горизонтальную прокрутку.
  5. Для демонстрации отобразим данные из Firestore:
    1. Во-первых, убедитесь, что вы создали коллекцию.
    2. Сделайте запрос к коллекции на виджете DataTable.
    3. Отобразите данные запроса в поле Placeholder > Text.
Воспроизвести

Сортировка

Сортировка в DataTable работает следующим образом: сначала вы отмечаете столбец для сортировки. Затем, когда пользователь нажимает на заголовок, вы получаете обратный вызов OnSortChanged с двумя свойствами: Sorted Column Index и Is Ascending. Вы используете оба свойства в пользовательской функции, чтобы написать логику сортировки.

  • Sorted Column Index определяет столбец, по которому должны быть отсортированы данные (0 для первого столбца, 1 для второго и так далее).
  • Is Ascending определяет направление сортировки (true — по возрастанию, false — по убыванию).
Помните, что сортировка не выполняется виджетом DataTable автоматически. Он предоставляет вам возможность реализовать собственную логику сортировки с помощью пользовательской функции.

Давайте расширим предыдущий пример и посмотрим, как можно включить сортировку по столбцам. Вот как это выглядит:

Воспроизвести

Чтобы включить сортировку:

  1. Выберите DataTableHeader, перейдите на панель свойств и включите тумблер Sortable. Примените это к каждому столбцу, который вы хотите сортировать
  2. Выберите виджет DataTable, выберите Действия на панели свойств и откройте Редактор потока действий.
  3. Выберите опцию On Sort Changed. Действия, добавленные в этом поле, будут срабатывать каждый раз, когда пользователь нажимает на заголовок любого столбца, в котором включена сортировка.
  4. В этом примере мы обновим переменную состояния страницы (которая заполняет таблицу DataTable) отсортированными данными с помощью следующей пользовательской функции.
```dart List sortMyData( List listToSort, bool isAsc, int sortColumIndex, ) { /// MODIFY CODE ONLY BELOW THIS LINE // Sort by 'name' for 0, 'age' for 1, 'position' for 2 in code. switch (sortColumIndex) { case 0: listToSort.sort((a, b) => a.name.compareTo(b.name)); break; case 1: listToSort.sort((a, b) => a.age.compareTo(b.age)); break; case 2: listToSort.sort((a, b) => a.position.compareTo(b.position)); break; default: break; } if (!isAsc) { listToSort = listToSort.reversed.toList(); } return listToSort; /// MODIFY CODE ONLY ABOVE THIS LINE } ```
Воспроизвести

Поиск

Вы можете добавить функцию поиска в виджет DataTable, используя нашу функцию Simple Search. Однако для этого конкретного виджета вместо использования виджета Conditional Builder можно напрямую использовать Conditional Value, чтобы определить, какой результат отобразить на основе переменной IsShowFullList.

поиск 1

Выбор строк

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

Воспроизвести

Чтобы добиться этого, создайте переменную состояния страницы для хранения выбранного списка. При нажатии кнопки обновляйте эту переменную выбранными вариантами из DataTable. Обратите внимание, что DataTable предоставляет список индексов выбранных строк; вам понадобится пользовательская функция для получения строк, соответствующих этим индексам.

Вот точные шаги:

  1. Во-первых, создайте переменную состояния страницы, которая будет хранить список выбранных строк.
  2. Выберите таблицу DataTable, перейдите на панель свойств > свойства таблицы Paginated Data Table > включите переключатель Selectable.
  3. При нажатии кнопки обновляйте переменную состояния страницы с выбранными строками. При добавлении этого действия используйте следующую пользовательскую функцию для получения выбранных элементов на основе индексов. Вы можете получить список индексов выбранных строк через Widget State > DataTable Selected Rows.
  4. По желанию вы можете передать эту переменную на новую страницу для отображения выбранных элементов.

Пользовательская функция:

List findPromotedEmps( List allEmps, List selecteEmpsIndex, ) { /// MODIFY CODE ONLY BELOW THIS LINE // return allEmps based on selecteEmpsIndex List promotedEmps = []; for (int i = 0; i < selecteEmpsIndex.length; i++) { int index = selecteEmpsIndex[i]; if (index >= 0 && index < allEmps.length) { EmployeesRecord emp = allEmps[index]; promotedEmps.add(emp); } } return promotedEmps; /// MODIFY CODE ONLY ABOVE THIS LINE }
Воспроизвести

Получение уведомления о смене страницы

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

Воспроизвести

Для этого:

  1. Выберите виджет DataTable.
  2. Выберите Действия на панели свойств и откройте Редактор потока действий.
  3. Выберите пункт При изменении страницы. Этот обратный вызов дает вам индекс текущей строки, который является индексом первой строки новой страницы. Например, если на текущей странице 25 элементов (0-24), значение Current Row Index будет равно 25. Это полезно для API, которые получают фиксированный набор данных, указывая начальную позицию (смещение).
  4. Теперь добавьте действие для вызова постраничного API (который возвращает результат в виде фрагментов). Посмотрите, как добавить вызов постраничного API, добавив параметры запроса. В данном примере мы используем этот API: https://reqres.in/api/users?per_page=7&page=1. Примечание: этот API использует постраничную, а не смещенную пагинацию, что требует ручной настройки переменной page.
  5. При успешном выполнении вызова API можно добавить действие для добавления новых данных в текущий список. Для этого можно добавить следующую пользовательскую функцию для добавления новых результатов к существующим данным.
List addAlldatatoList( List currentUsersList, List newUsersList, ) { /// MODIFY CODE ONLY BELOW THIS LINE // add all newUsersList to currentUsersList currentUsersList.addAll(newUsersList); return currentUsersList; /// MODIFY CODE ONLY ABOVE THIS LINE }
Воспроизвести

Получение уведомления об изменении количества строк на странице

Иногда вам нужно получать обратный вызов, когда пользователь меняет количество строк, отображаемых на странице. Это полезно для динамической корректировки запросов на получение данных в зависимости от предпочтений пользователя.

Вот как это делается:

  1. Выберите виджет DataTable.
  2. Выберите Actions на панели Properties и откройте Action Flow Editor.
  3. Выберите опцию On Rows Per Page Changed. Любые действия, добавленные в этот пункт, будут срабатывать при изменении количества отображаемых строк.
  4. Теперь вы можете добавить сюда любое действие.
поиск 2

Настройка

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

Настройка постраничной таблицы данных

Чтобы настроить таблицу DataTable с пагинацией, перейдите на панель свойств > Свойства таблицы данных с пагинацией, а затем:

  1. Чтобы скрыть пагинацию, включите переключатель Hide Paginator.
  2. Чтобы отобразить кнопки для перехода к первой и последней странице таблицы данных, включите опцию Show First And Last Buttons.
  3. Чтобы иметь обычную таблицу данных без пагинации, выключите тумблер Paginated.
Воспроизвести

Изменение размера DataTable

О том, как изменить размер любого виджета, читайте здесь.

Обычно для DataTable нет необходимости задавать размер явно, поскольку она предназначена для демонстрации больших наборов данных и должна использовать все доступное пространство. Однако, чтобы включить горизонтальную прокрутку в DataTable (когда содержимое превышает ширину экрана), необходимо указать Min Width.
Воспроизвести

Настройка расстояния между строками и столбцами

Чтобы изменить расстояние между строками и столбцами, перейдите на панель свойств > Свойства макета, а затем настройте следующие свойства:

  1. Высота строки заголовка: Здесь изменяется высота заголовка.
  2. Высота строки данных: Это изменение высоты всех строк.
  3. Расстояние между столбцами: Изменяет расстояние между столбцами.
Воспроизвести

Настройка цвета таблицы данных

Чтобы изменить цвет строки, выберите таблицу DataTable, перейдите на панель свойств и измените цвета для следующих свойств:

  • Цвет строки заголовка: задает цвет фона для строки заголовка.
  • Цвет строки данных: задает цвет фона для строк, в которых отображаются данные.
  • Цвет альтернативных строк: позволяет использовать другой цвет фона для альтернативных строк.
  • Цвет значка сортировки: изменяет цвет значка сортировки, используемого в сортируемых столбцах.
Воспроизвести

Настройте радиус границы

Чтобы добавить закругленные углы в таблицу DataTable, перейдите на панель свойств > Свойства стиля > Радиус границы, а затем:

  1. Введите значения для TL (верхний левый угол), TR (верхний правый угол), BL (нижний левый угол) и BR (нижний правый угол).
  2. Чтобы применить одинаковый радиус со всех сторон, переключитесь на опцию Равномерный радиус. Затем вы можете настроить радиус, перемещая ползунок или вводя нужное значение напрямую.
поиск 3

Добавьте разделители

Чтобы добавить горизонтальные и вертикальные разделители в таблицу DataTable, перейдите на панель свойств > Свойства стиля > включите горизонтальные и вертикальные разделители.

После включения вы также можете изменить их цвет и толщину.

поиск 4

Настройка цветов флажков

Когда строки являются выбираемыми, вы можете настроить внешний вид флажка, изменив следующие цветовые свойства:

  1. Цвет заливки выбранного: задает цвет фона флажка, когда он выбран.
  2. Цвет заливки невыбранного: задает цвет фона флажка, когда он не выбран.
  3. Цвет границы невыбранного: изменяет цвет границы флажка, когда он не выбран.
  4. Цвет границы выбранного: изменяет цвет границы флажка, когда он выбран.
  5. Цвет флажка: изменяет цвет самого флажка, когда он выбран, обеспечивая визуальную обратную связь с пользователем о его статусе выбора.

Общие свойства виджетов

Узнайте, как работать со стилем виджета, видимостью, отступом и выравниванием, а также тестированием.