reorderable_table.dart 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. //import 'dart:math' as math;
  2. import 'package:flutter/material.dart';
  3. import './reorderable_flex.dart';
  4. import './tabluar_flex.dart';
  5. import './typedefs.dart';
  6. import '../rendering/tabluar_flex.dart';
  7. class ReorderableTableRow extends TabluarRow {
  8. ReorderableTableRow({
  9. MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  10. MainAxisSize mainAxisSize = MainAxisSize.max,
  11. CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  12. TextDirection? textDirection,
  13. VerticalDirection verticalDirection = VerticalDirection.down,
  14. TextBaseline? textBaseline,
  15. List<Widget> children = const <Widget>[],
  16. Decoration? decoration,
  17. Key? key,
  18. }) : super(
  19. children: children,
  20. mainAxisAlignment: mainAxisAlignment,
  21. mainAxisSize: mainAxisSize,
  22. crossAxisAlignment: crossAxisAlignment,
  23. textDirection: textDirection,
  24. verticalDirection: verticalDirection,
  25. textBaseline: textBaseline,
  26. decoration: decoration,
  27. key: key,
  28. );
  29. }
  30. typedef DecorateDraggableFeedback = Widget Function(
  31. BuildContext feedbackContext, Widget draggableFeedback);
  32. /// Reorderable (drag and drop) version of [Table], a widget that displays its
  33. /// children in a two-dimensional grid.
  34. ///
  35. /// The difference between table and list is that cells in a table are
  36. /// horizontally aligned, whereas in a list, each item can have children but
  37. /// they are not aligned with children in another item.
  38. /// Making a row draggable requires cells to be contained in a single widget.
  39. /// This isn't achievable with [Table] or [GridView] widget since their
  40. /// children are laid out as cells of widget instead of rows of widget.
  41. ///
  42. /// Cells of each row must be children of [ReorderableTableRow] and each
  43. /// [ReorderableTableRow] must have a key.
  44. ///
  45. /// See also:
  46. ///
  47. /// * [ReorderableTableRow], which is the container of a row of cells.
  48. /// * [Table], which uses the table layout algorithm for its children.
  49. class ReorderableTable extends StatelessWidget {
  50. /// Creates a reorderable table.
  51. ///
  52. /// The [children], [defaultColumnWidth], and [defaultVerticalAlignment]
  53. /// arguments must not be null.
  54. ReorderableTable({
  55. required this.onReorder,
  56. this.children = const <ReorderableTableRow>[],
  57. this.columnWidths,
  58. this.defaultColumnWidth = const FlexColumnWidth(1.0),
  59. this.textDirection,
  60. this.border,
  61. this.defaultVerticalAlignment = TableCellVerticalAlignment.top,
  62. this.textBaseline,
  63. this.header,
  64. this.footer,
  65. this.decorateDraggableFeedback,
  66. this.onNoReorder,
  67. this.reorderAnimationDuration,
  68. this.scrollAnimationDuration,
  69. this.ignorePrimaryScrollController = false,
  70. this.needsLongPressDraggable = true,
  71. Key? key,
  72. this.borderColor,
  73. }) : assert(() {
  74. if (children.any((ReorderableTableRow row1) =>
  75. row1.key != null &&
  76. children.any((ReorderableTableRow row2) =>
  77. row1 != row2 && row1.key == row2.key))) {
  78. throw FlutterError(
  79. 'Two or more ReorderableTableRow children of this Table had the same key.\n'
  80. 'All the keyed ReorderableTableRow children of a Table must have different Keys.');
  81. }
  82. return true;
  83. }()),
  84. // assert(() {
  85. // if (children.isNotEmpty) {
  86. // final int cellCount = children.first.children.length;
  87. // if (children.any((ReorderableTableRow row) => row.children.length != cellCount)) {
  88. // throw FlutterError(
  89. // 'Table contains irregular row lengths.\n'
  90. // 'Every ReorderableTableRow in a Table must have the same number of children, so that every cell is filled. '
  91. // 'Otherwise, the table will contain holes.'
  92. // );
  93. // }
  94. // }
  95. // return true;
  96. // }()),
  97. super(key: key) {
  98. assert(() {
  99. final List<Widget> flatChildren = children
  100. .expand<Widget>((ReorderableTableRow row) => row.children)
  101. .toList(growable: false);
  102. if (debugChildrenHaveDuplicateKeys(this, flatChildren)) {
  103. throw FlutterError(
  104. 'Two or more cells in this Table contain widgets with the same key.\n'
  105. 'Every widget child of every TableRow in a Table must have different keys. The cells of a Table are '
  106. 'flattened out for processing, so separate cells cannot have duplicate keys even if they are in '
  107. 'different rows.');
  108. }
  109. return true;
  110. }());
  111. }
  112. /// The rows of the table.
  113. ///
  114. /// Every row in a table must have the same number of children, and all the
  115. /// children must be non-null.
  116. final List<ReorderableTableRow> children;
  117. /// How the horizontal extents of the columns of this table should be determined.
  118. ///
  119. /// If the [Map] has a null entry for a given column, the table uses the
  120. /// [defaultColumnWidth] instead. By default, that uses flex sizing to
  121. /// distribute free space equally among the columns.
  122. ///
  123. /// The [FixedColumnWidth] class can be used to specify a specific width in
  124. /// pixels. That is the cheapest way to size a table's columns.
  125. ///
  126. /// The layout performance of the table depends critically on which column
  127. /// sizing algorithms are used here. In particular, [IntrinsicColumnWidth] is
  128. /// quite expensive because it needs to measure each cell in the column to
  129. /// determine the intrinsic size of the column.
  130. final Map<int, TableColumnWidth>? columnWidths;
  131. /// How to determine with widths of columns that don't have an explicit sizing algorithm.
  132. ///
  133. /// Specifically, the [defaultColumnWidth] is used for column `i` if
  134. /// `columnWidths[i]` is null.
  135. final TableColumnWidth defaultColumnWidth;
  136. /// The direction in which the columns are ordered.
  137. ///
  138. /// Defaults to the ambient [Directionality].
  139. final TextDirection? textDirection;
  140. /// The style to use when painting the boundary and interior divisions of the table.
  141. final TableBorder? border;
  142. final Color? borderColor;
  143. /// How cells that do not explicitly specify a vertical alignment are aligned vertically.
  144. final TableCellVerticalAlignment defaultVerticalAlignment;
  145. /// The text baseline to use when aligning rows using [TableCellVerticalAlignment.baseline].
  146. final TextBaseline? textBaseline;
  147. /// Non-reorderable widget at top of the table. Cells in [header] also affects
  148. /// alignment of columns.
  149. final Widget? header;
  150. /// Non-reorderable widget at top of the table. Cells in [footer] also affects
  151. /// alignment of columns.
  152. final Widget? footer;
  153. /// Called when a child is dropped into a new position to shuffle the
  154. /// children.
  155. final ReorderCallback onReorder;
  156. final NoReorderCallback? onNoReorder;
  157. final DecorateDraggableFeedback? decorateDraggableFeedback;
  158. final Duration? reorderAnimationDuration;
  159. final Duration? scrollAnimationDuration;
  160. final bool ignorePrimaryScrollController;
  161. final bool needsLongPressDraggable;
  162. @override
  163. Widget build(BuildContext context) {
  164. // return TabluarColumn(
  165. // mainAxisSize: MainAxisSize.min,
  166. // children: itemRows +
  167. // [
  168. // ReorderableTableRow(key: ValueKey<int>(1), mainAxisSize:MainAxisSize.min, children: <Widget>[Text('111111111111'), Text('222')]),
  169. // ReorderableTableRow(key: ValueKey<int>(2), mainAxisSize:MainAxisSize.min, children: <Widget>[Text('33'), Text('4444444444')])
  170. // ],
  171. // )
  172. final GlobalKey tableKey =
  173. GlobalKey(debugLabel: '$ReorderableTable table key');
  174. return ReorderableFlex(
  175. header: header,
  176. footer: footer,
  177. children: children,
  178. onReorder: onReorder,
  179. onNoReorder: onNoReorder,
  180. needsLongPressDraggable: needsLongPressDraggable,
  181. direction: Axis.vertical,
  182. buildItemsContainer: (BuildContext containerContext, Axis direction,
  183. List<Widget> children) {
  184. List<Widget> mapped = borderColor == null
  185. ? children
  186. : children.map<Widget>(
  187. (child) {
  188. final index = children.indexOf(child);
  189. if (index > 0) {
  190. return Container(
  191. decoration: BoxDecoration(
  192. border: Border.symmetric(
  193. horizontal: BorderSide(
  194. color: borderColor!,
  195. width:
  196. index != children.length - 1 ? 0.5 : 1),
  197. vertical: BorderSide(color: borderColor!),
  198. ),
  199. ),
  200. child: child);
  201. }
  202. return child;
  203. },
  204. ).toList();
  205. return TabluarFlex(
  206. key: tableKey,
  207. direction: direction,
  208. // mainAxisAlignment: mainAxisAlignment,
  209. // mainAxisSize: MainAxisSize.min,
  210. // crossAxisAlignment: crossAxisAlignment,
  211. textDirection: textDirection,
  212. // verticalDirection: verticalDirection,
  213. textBaseline: textBaseline,
  214. children: mapped);
  215. },
  216. buildDraggableFeedback: (BuildContext feedbackContext,
  217. BoxConstraints constraints, Widget child) {
  218. // The child is a ReorderableTableRow because children is a List<ReorderableTableRow>
  219. ReorderableTableRow tableRow = child as ReorderableTableRow;
  220. RenderTabluarFlex renderTabluarFlex =
  221. tableKey.currentContext!.findRenderObject() as RenderTabluarFlex;
  222. int grandChildIndex = 0;
  223. for (;
  224. grandChildIndex < tableRow.children.length;
  225. grandChildIndex++) {
  226. tableRow.children[grandChildIndex] = ConstrainedBox(
  227. constraints: BoxConstraints(
  228. minWidth: renderTabluarFlex
  229. .maxGrandchildrenCrossSize[grandChildIndex]!),
  230. child: tableRow.children[grandChildIndex]);
  231. }
  232. for (;
  233. grandChildIndex <
  234. renderTabluarFlex.maxGrandchildrenCrossSize.length;
  235. grandChildIndex++) {
  236. tableRow.children.add(ConstrainedBox(
  237. constraints: BoxConstraints(
  238. minWidth: renderTabluarFlex
  239. .maxGrandchildrenCrossSize[grandChildIndex]!),
  240. ));
  241. }
  242. ConstrainedBox constrainedTableRow =
  243. ConstrainedBox(constraints: constraints, child: tableRow);
  244. return Transform(
  245. transform: new Matrix4.rotationZ(0),
  246. alignment: FractionalOffset.topLeft,
  247. child: Material(
  248. // child: Card(child: ConstrainedBox(constraints: constraints, child: tableRow)),
  249. child: (decorateDraggableFeedback ??
  250. defaultDecorateDraggableFeedback)(
  251. feedbackContext, constrainedTableRow),
  252. elevation: 6.0,
  253. color: Colors.transparent,
  254. borderRadius: BorderRadius.zero,
  255. ),
  256. );
  257. },
  258. reorderAnimationDuration: reorderAnimationDuration,
  259. scrollAnimationDuration: scrollAnimationDuration,
  260. ignorePrimaryScrollController: ignorePrimaryScrollController);
  261. }
  262. Widget defaultDecorateDraggableFeedback(
  263. BuildContext feedbackContext, Widget draggableFeedback) =>
  264. Card(child: draggableFeedback);
  265. }