FL @flutterfriendly
Showing posts older than #328 · Back to latest
Column, Row, ListView и различные layout-виджеты. Но как часто в проектах вы сталкивались с таблицами и использовали для этого виджет Table? Табличную структуру можно реализовать через комбинацию Column + Row + ListView. Иногда это оправдано, но не всегда — иногда лучше использовать специально предназначенные для этого инструменты. PaginatedDataTable — для работы с большими таблицами с поддержкой постраничной навигации. Используется для больших таблиц, где можно управлять сортировкой и переходами между страницами данныхPaginatedDataTable(
header: Text('Список пользователей'),
columns: const [
DataColumn(label: Text('ID')),
DataColumn(label: Text('Имя')),
DataColumn(label: Text('Email')),
],
source: myDataSource, // DataTableSource
rowsPerPage: 10,
)
DataTable – для небольших или заранее известных наборов данных. Строки добавляются динамически из моделей, что упрощает масштабирование User:DataTable(
columns: const [
DataColumn(label: Text('ID')),
DataColumn(label: Text('Имя')),
DataColumn(label: Text('Email')),
],
rows: users.map((user) {
return DataRow(cells: [
DataCell(Text(user.id.toString())),
DataCell(Text(user.name)),
DataCell(Text(user.email)),
]);
}).toList(),
)
Table — дает полный контроль над структурой строк и столбцов. Каждая строка создается черезRow, ListVie а каждая ячейка может содержать любой виджет или комбинированный UI.Table(
border: TableBorder.all(color: Colors.black26), // границы таблицы
columnWidths: { // ширина столбцов
0: FlexColumnWidth(2),
1: FlexColumnWidth(3),
},
children: [ // список строк
TableRow(children: [ // каждая строка с набором виджетов
Text('ID', textAlign: TextAlign.center),
Text('Имя', textAlign: TextAlign.center),
]),
TableRow(children: [
Text('1', textAlign: TextAlign.center),
Row(children: [Icon(Icons.person), Text('Алексей')]),
]),
TableRow(children: [
Text('2', textAlign: TextAlign.center),
Row(children: [Icon(Icons.person), Text('Мария')]),
]),
],
)
columnWidths можно управлять шириной столбцов: FixedColumnWidth — фиксированная ширина FlexColumnWidth – пропорциональная IntrinsicColumnWidth – по содержимому Table нельзя использовать Expanded, так как отрисовка и размеры управляются самим виджетом.
Table FlexColumnWidth ExpansionTile), Table может стать узким местом. Для таких случаев иногда удобнее использовать комбинацию ListView + Row/Column Row/Column + ListView оправдано, если у вас простой список элементов, строки сильно различаются по содержимому или нужен вертикальный скролл без необходимости выравнивания колонок
version: 1.2.3+4
version: A.B.C+D
