material_table_view

这是一个开源的 Flutter 包，包含一个小部件，可以在一个可垂直和水平滚动的 Material 风格表格中显示您的数据，该表格具有固定宽度的可冻结列，可根据屏幕尺寸动态调整，并支持数十亿行按需构建。此包优先考虑可用性和视觉一致性。

查看演示 查看 Github
此演示使用了包中包含的闪烁效果。此演示的源代码包含在包示例中，可在此处 获取。

功能

  • 可水平和垂直滚动，这意味着行和列都可以滚动，以便向用户显示大量数据。
  • 固定宽度的列，可以冻结，这意味着当列会滚出屏幕时，它会被固定在左侧或右侧。这有助于用户在水平滚动时不会丢失标识行的信息。列会在水平空间不足时根据开发人员定义的冻结优先级自动解冻，这意味着表格可以适应任何屏幕尺寸，无论是手机还是桌面。
  • 固定列属性，该属性会导致冻结列滚动出边缘，但在另一方向滚动时重新出现，以在水平空间有限时节省空间。
  • 按需构建的固定高度行，允许一个表格中包含数十亿行。
  • 支持自定义的单个行小部件包装器，允许开发人员将每一行包装在 InkWell 中，同时包含行内的所有单元格小部件，从而在行内实现许多 Material 交互。
  • 支持占位符行。
  • 支持自定义的可选动画占位符行着色，使着色器可以依赖于垂直滚动偏移，并在任何占位符可见或不可见时开始或停止动画。
  • 包含的闪烁着色器允许将动画线性渐变应用于占位符行。
  • 滚动行为由应用程序主题定义，包括滚动物理、滚动效果等。这意味着如果您没有覆盖它，将默认使用平台默认的滚动行为。
  • 分隔线动画：当一列滚动到另一列下方，该列在屏幕边缘冻结时，一条抖动的分隔线将动画显示，指示用户列已分离，还有更多内容可滚动。
  • 支持水平滚动的表头和表尾。
  • SliverTableView - 表格视图的 sliver 变体，可以与 CustomScrollView 中的其他 slivers（包括其他 SliverTableView 实例）一起使用，由单个视图垂直滚动。它具有固定的表头和表尾，以及与常规表格视图相同的功能。

用法

TableView.builder(
  columns: [
    // TODO specify columns
    const TableColumn(
      width: 56.0,
      freezePriority: 100,
    ),
    for (var i = 1; i < 100; i++)
      const TableColumn(width: 64), // TODO specify freezePriority to freeze a column
  ],
  rowCount: 1048576, // TODO specify row count
  rowHeight: 56.0, // TODO specify row height
  rowBuilder: (context, row, contentBuilder) {
    // TODO fetch row data
    return InkWell(
      onTap: () => print('Row $row clicked'),
      child: contentBuilder(
        context,
        (context, column) => Text('$column'), // TODO build a cell widget
      ),
    );
  },
  // TODO specify other parameters for other features
),

限制

行包装小部件限制

并非所有小部件都可以用作 rowBuilder 和 placeholderBuilder 函数中构建的行小部件。任何可能需要使用组合的小部件都将导致异常或无法按预期工作。这包括 RepaintBoundary、Opacity、ShaderMask、 clipping widgets 等小部件。Material 小部件只能与指定类型的 MaterialType.transparency 一起使用，这是唯一不需要组合的类型。对于其中一些，包提供了特殊替代方案，可以用于（且仅用于）该目的。

  • TableRowOpacity - `Opacity` 小部件的替代品；

  • TableRowFadeTransition - `FadeTransition` 小部件的替代品；

  • tableRowDefaultAnimatedSwitcherTransitionBuilder 函数 - 替代品
    用于 `AnimatedSwitcher.defaultTransitionBuilder` 函数
    可以用作 `AnimatedSwitcher` 的 `transitionBuilder`，在这种情况下
    默认的将无法工作。

    如果您需要任何替代方案不可用，
    请随时使用 问题跟踪器。

在行上方绘图可能无法按预期工作。

这些限制 **不** 适用于由 `cellBuilder` 闭包构建的单元格小部件。

这些限制是由于表格小部件绘制中涉及的自定义组合，用于优化目的。