Flutter表格视图插件material_table_view的使用

简介

material_table_view 是一个功能全面、易于集成到任何Flutter应用程序中的UI/UX解决方案，适用于多种数据表用例。它具有高度可定制性，并且可以适应任何屏幕尺寸、输入方法和平台。

项目目标

1. 提供直观、视觉上一致且可自定义的UI/UX，默认情况下具有意见。
2. 使解决方案能够适应任何屏幕尺寸、输入方法和平台。
3. 尽量保持公共API的稳定性。
4. 尽可能多地保持特性为可选状态。
5. 完全由开发者决定状态管理方式。
6. 尽量减少依赖。
7. 尽可能考虑性能。

功能特性

• 高度可定制性和反应性：所有标题、页脚、行和单元格都是小部件，这使得处理状态变化以及无限定制内容变得更加容易。
• 支持水平和垂直滚动，允许用户查看大量数据。
• 懒加载固定高度行，支持数十亿行的数据展示（虚拟化）。
• 固定宽度列可以被冻结在屏幕边缘，防止在水平滚动时丢失行标识信息。
• 支持“粘性”列属性，当水平空间有限时，冻结列会滚动出屏幕并在反向滚动时返回。
• 支持自定义单个行的小部件包装器，允许每个单独的行包含多个Material交互。
• 支持占位符行及动画阴影效果。
• 内置Shimmer阴影，允许对占位符行应用动画线性渐变。
• 支持自定义滚动行为，包括滚动物理效果和过度滚动效果等。
• 可自定义的垂直和水平滚动条。
• 可自定义的动画波浪分隔线，用于分离冻结和滚动的列。
• 支持水平可滚动的表头和表尾。
• 支持SliverTableView，可在CustomScrollView中与其他slivers一起使用。
• 列控制手柄弹出窗口，允许用户调整列宽和重新排序。
• 行重新排序功能。
• 完整的RTL布局支持。

使用示例

下面是一个完整的示例demo，展示了如何使用material_table_view创建一个带有复选框、可排序列和其他特性的表格：

import 'package:flutter/material.dart';
import 'package:material_table_view/material_table_view.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'material_table_view Demo',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final columns = List<TableColumn>.generate(
    10, 
    (index) => TableColumn(width: 64.0),
    growable: false,
  );

  int rowCount = 100;
  double rowHeight = 56.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('material_table_view Example')),
      body: TableView.builder(
        columns: columns,
        rowCount: rowCount,
        rowHeight: rowHeight,
        rowBuilder: (context, row, contentBuilder) {
          return InkWell(
            onTap: () => print('Row $row clicked'),
            child: contentBuilder(
              context,
              (context, column) => Text('$column'), // 构建单元格小部件
            ),
          );
        },
        headerBuilder: (context, contentBuilder) {
          return contentBuilder(
            context,
            (context, column) => Center(child: Text('Header $column')), // 构建表头
          );
        },
        footerBuilder: (context, contentBuilder) {
          return contentBuilder(
            context,
            (context, column) => Center(child: Text('Footer $column')), // 构建表尾
          );
        },
      ),
    );
  }
}

在这个例子中，我们创建了一个简单的表格视图，其中包含了表头、表尾和一些示例数据。你可以根据需要修改columns、rowCount、rowHeight等参数来自定义你的表格视图。

注意事项

• 行包装限制：不是所有的widget都可以用来包裹通过rowBuilder和placeholderBuilder函数构建的行小部件。例如，像RepaintBoundary、Opacity等可能会导致异常或不按预期工作。对于这些情况，插件提供了特殊的替代方案。
• 已知问题：存在一些已知的问题，如首次冻结右侧列后其他列消失的问题，垂直滚动条受水平拉伸影响等问题。如果你遇到了这些问题，可以通过GitHub上的issue tracker寻求帮助或报告新问题。

获取帮助

如果您遇到任何问题或有功能请求，请随时使用GitHub issue tracker来搜索现有问题或打开一个新的问题。

贡献代码

如果您希望为这个包做出贡献，请随时在GitHub上提交pull request。

许可证

所有源代码均以MIT许可证公开发布。