PaginatedDataTable во Flutter Web
Как использовать PaginatedDataTable во Flutter Web? Хм…
Все в одном ресурсе Flutter: https://flatteredwithflutter.com/using-paginateddatatable-in-flutter-web/
Начинать…
Веб-сайт: https://fir-signin-4477d.firebaseapp.com/#/
Мы кратко расскажем о
- PaginatedDataTable ..
- CustomPaginatedTable (оболочка над PaginatedDataTable)
Примечание. Для изменения данных мы использовали Provider…. В этой статье не объясняется, как будут отправляться уведомления об изменениях…
Представляем PaginatedDataTable….
Согласно документации:
Таблица данных материального дизайна, которая отображает данные на нескольких страницах.
Таблица данных с разбивкой на страницы показывает строки данных rowsPerPage на каждой странице и предоставляет элементы управления для отображения других страниц.
Данные лениво читаются из DataTableSource.
Примечание. Данные читаются лениво, что означает, что виджет уже имеет соответствующую оптимизацию производительности…
Для этой статьи мы создали настраиваемый виджет под названием CustomPaginatedTable .. ( в основном оболочка над PaginatedDataTable) ..
Это структура нашего CustomPaginatedTable. Мы сохранили некоторые значения по умолчанию в последних строках нашего конструктора ...
В случае, если вы хотите просто увидеть образец таблицы, вы можете
@override
Widget build(BuildContext context) {
return CustomPaginatedTable();
}
Это инициализирует paginatedDataTable с данными и источником по умолчанию…
Получение данных для отображения.
Мы использовали пример службы API для отдыха…
https://jsonplaceholder.typicode.com/users
Это дает нам список из 10 пользователей ... Затем мы преобразовали ответ в UserModel ..
Теперь, чтобы отобразить модель пользователя в CustomPaginatedTable, нам нужно
- Укажите dataColumns (это будет список)
Например,
<DataColumn>[
DataColumn(
label: Text(DataTableConstants.colPhone),
tooltip: DataTableConstants.colPhone,
),
DataColumn(
label: Text(DataTableConstants.colWebsite),
tooltip: DataTableConstants.colWebsite,
),
DataColumn(
label: Text(DataTableConstants.otherDetails),
tooltip: DataTableConstants.otherDetails,
),
];
Выход :
- Укажите dataSource ( это принимает класс, расширяющий DataTableSource)
Примечание. Он отвечает за отображение строк внутри таблицы данных… и по умолчанию реализует notifyListeners.
Мы создаем класс под названием UserDataTableSource,
UserDataTableSource({
@required List<UserModel> userData,
}) : _userData = userData,
assert(userData != null);
final List<UserModel> _userData;
Мы передадим список UserModel нашему UserDataTableSource.
- Отображение строк данных,
DataRow getRow(int index){
// IMPLEMENT HERE
}
@override
int get rowCount => _userData.length;
Для каждого индекса мы проанализируем желаемые значения как
ПРИМЕЧАНИЕ. Количество DataCell (здесь) и DataColumn (см. шаг выше) должно быть одинаковым.
Внедрить сортировку…
В большинстве случаев нам может потребоваться отсортировать данные, например, в этом примере.
Мы хотим отсортировать по электронной почте, имени и идентификатору ..
Реализуем нашу логику сортировки.
Создайте метод под названием sort внутри UserDataTableSource…
getField: какой тип поля (присутствует в UserModel) вы хотите отсортировать.
по возрастанию: сортировка по возрастанию или убыванию.
Вернемся к dataColumns, где у нас есть список…
DataColumn(
label: Text(DataTableConstants.colID),
numeric: true,
tooltip: DataTableConstants.colID,
onSort: (colIndex, asc) {
_sort<num>((user) => user.id, colIndex, asc, _src, _provider);
},
),
в DataColumn есть свойство onSort.
В нашем основном классе нам нужна собственная функция, где мы указываем
void _sort<T>(
Comparable<T> Function(UserModel user) getField,
int colIndex,
bool asc,
UserDataTableSource _src,
UserDataNotifier _provider,
) {
_src.sort<T>(getField, asc);
_provider.sortAscending = asc;
_provider.sortColumnIndex = colIndex;
}
Примечание. Указанный выше fxn (_sort) является частным (доступен только из нашего класса) и, в свою очередь, вызывает sort UserDataTableSource
Пора реализовать это в наших столбцах данных (имя, идентификатор и адрес электронной почты)…
Для id мы указываем тип как num… Для name / email мы указываем как String…
И теперь мы можем сортировать… ..
RowsPerPage
Внутри нашего CustomPaginatedTable есть свойство onRowChanged. Это в основном привязывается к свойству onRowsPerPageChanged объекта PaginatedDataTable ..
Сначала мы устанавливаем для rowsPerPage (property) значение по умолчанию.
PaginatedDataTable.defaultRowsPerPage
и когда мы хотим изменить значение, мы вызываем fxn onRowChanged и передаем выбранное значение ..
onRowChanged: (index) => _provider.rowsPerPage = index, rowsPerPage: _provider.rowsPerPage,
Действия с DataTable…
Чтобы отображать действия (в нашем случае обновление), мы указываем (в нашей CustomPaginatedTable)
showActions: true,
а для типа действия мы устанавливаем
actions: <IconButton>[
IconButton(
splashColor: Colors.transparent,
icon: const Icon(Icons.refresh),
onPressed: () {
_provider.fetchData();
_showSBar(context, DataTableConstants.refresh);
},
),
],
Появится следующий значок обновления (вверху справа):
Посмотреть другие детали
Иногда мы хотим скрыть дополнительные детали и показывать их только по запросу пользователя. Для этого у нас есть поле OtherDetails ..
С каждой строкой связан значок (перевернутый треугольник), ..
DataCell(
IconButton(
hoverColor: Colors.transparent,
splashColor: Colors.transparent,
icon: const Icon(Icons.details),
onPressed: () => onRowSelect(index),
),
),
и щелкнув значок, мы открываем диалоговое окно и показываем детали этой строки.
UserDataTableSource(
onRowSelect: (index) => _showDetails(context, _model[index]),
userData: _model,
);
void _showDetails(BuildContext c, UserModel data) async =>
await showDialog<bool>(
context: c,
builder: (_) => CustomDialog(
showPadding: false,
child: OtherDetails(data: data),
),
);
Статьи, связанные с Flutter Web:
Размещенный URL: https://fir-signin-4477d.firebaseapp.com/#/
Уф… ..
