数据表显示原始数据集。它们通常出现在桌面企业产品中。DataTable Widget实现这个组件
文档:https://api.flutter.dev/flutter/material/DataTable-class.html
import 'package:flutter/material.dart'; import './model/post.dart'; class DataTableDemo extendsStatefulWidget { @override _DataTableDemoState createState() =>_DataTableDemoState(); } class _DataTableDemoState extends State<DataTableDemo>{ int_sortColumnIndex; bool _sortAscending = true; @override Widget build(BuildContext context) { returnScaffold( appBar: AppBar( title: Text('DataTableDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: ListView( children: <Widget>[ DataTable( sortColumnIndex: _sortColumnIndex, sortAscending: _sortAscending, //onSelectAll: (bool value) {}, columns: [ DataColumn( label: Text('Title'), onSort: (intindex, bool ascending) { setState(() { _sortColumnIndex =index; _sortAscending =ascending; posts.sort((a, b) { if (!ascending) { final c =a; a =b; b =c; } returna.title.length.compareTo(b.title.length); }); }); }, ), DataColumn( label: Text('Author'), ), DataColumn( label: Text('Image'), ), ], rows: posts.map((post) { returnDataRow( selected: post.selected, onSelectChanged: (bool value) { setState(() { if (post.selected !=value) { post.selected =value; } }); }, cells: [ DataCell(Text(post.title)), DataCell(Text(post.author)), DataCell(Image.network(post.imageUrl)), ] ); }).toList(), ), ], ), ) ); } }
效果:
分页demo
import 'package:flutter/material.dart'; import './model/post.dart'; class PostDataSource extendsDataTableSource { final List<Post> _posts =posts; int _selectedCount = 0; @override int get rowCount =>_posts.length; @override bool get isRowCountApproximate => false; @override int get selectedRowCount =>_selectedCount; @override DataRow getRow(intindex) { final Post post =_posts[index]; returnDataRow.byIndex( index: index, cells: <DataCell>[ DataCell(Text(post.title)), DataCell(Text(post.author)), DataCell(Image.network(post.imageUrl)), ], ); } void_sort(getField(post), bool ascending) { _posts.sort((a, b) { if (!ascending) { final c =a; a =b; b =c; } final aValue =getField(a); final bValue =getField(b); returnComparable.compare(aValue, bValue); }); notifyListeners(); } } class PaginatedDataTableDemo extendsStatefulWidget { @override _PaginatedDataTableDemoState createState() =>_PaginatedDataTableDemoState(); } class _PaginatedDataTableDemoState extends State<PaginatedDataTableDemo>{ int_sortColumnIndex; bool _sortAscending = true; final PostDataSource _postsDataSource =PostDataSource(); @override Widget build(BuildContext context) { returnScaffold( appBar: AppBar( title: Text('PaginatedDataTableDemo'), elevation: 0.0, ), body: Container( padding: EdgeInsets.all(16.0), child: ListView( children: <Widget>[ PaginatedDataTable( header: Text('Posts'), rowsPerPage: 5, source: _postsDataSource, sortColumnIndex: _sortColumnIndex, sortAscending: _sortAscending, //onSelectAll: (bool value) {}, columns: [ DataColumn( label: Text('Title'), onSort: (intcolumnIndex, bool ascending) { _postsDataSource._sort((post) =>post.title.length, ascending); setState(() { _sortColumnIndex =columnIndex; _sortAscending =ascending; }); }, ), DataColumn( label: Text('Author'), ), DataColumn( label: Text('Image'), ), ], ), ], ), )); } }
效果: