PlutoGrid for flutter – v4.0.1

Awesome Flutter codecov License: MIT

PlutoGrid 是一个 DataGrid，可以在多种情况下（如移动单元格）用键盘进行操作。它主要针对 Web 和桌面开发。移动端的 UI 改进正在考虑中。如果您在 Issues 中发表评论，移动端改进将能更快地实现。

PlutoGrid 4 版本的主要更新

PlutoGrid 4 版本的主要更新是性能提升。通过优化状态更改，即使数据量很大，也能保持适当的帧率。要检查这一点，请以 profile 或 build 模式运行 Flutter。在某些操作中，UI 仍可能出现冻结。我计划逐一改进这些问题，如果您发现类似情况，请通过 Issue 告知我。在创建网格时如果传递大量行，UI 可能会冻结。请查看下面的示例。异步初始化行

演示Web端

您可以立即尝试各种功能和用法。所有功能都提供示例代码。

Pub.Dev

请从官方分发网站查看安装方法。

文档

文档中有更多详细信息。

变更日志

在更改您正在使用的 PlutoGrid 版本时，请注意其中的改动。

Issues

报告任何问题或错误。

包

PlutoGridExport 此包可以将 PlutoGrid 的元数据导出为 CSV 或 PDF。

屏幕截图

更改行的颜色或使单元格外观符合您的要求。

PlutoGrid Normal

通过弹出窗口和键盘可以轻松选择日期类型输入。

PlutoGrid Select Popup

通过弹出窗口和键盘可以轻松选择选择类型列。

PlutoGrid Select Date

按所需的深度分组列。

PlutoGrid Cell renderer

网格可以显示为暗模式或您想要的颜色组合。此外，还可以冻结列、通过拖动移动列或调整列大小。

PlutoGrid Multi select

示例

生成要在网格中使用的数据。

List<PlutoColumn> columns = [
  /// Text Column definition
  PlutoColumn(
    title: 'text column',
    field: 'text_field',
    type: PlutoColumnType.text(),
  ),
  /// Number Column definition
  PlutoColumn(
    title: 'number column',
    field: 'number_field',
    type: PlutoColumnType.number(),
  ),
  /// Select Column definition
  PlutoColumn(
    title: 'select column',
    field: 'select_field',
    type: PlutoColumnType.select(['item1', 'item2', 'item3']),
  ),
  /// Datetime Column definition
  PlutoColumn(
    title: 'date column',
    field: 'date_field',
    type: PlutoColumnType.date(),
  ),
  /// Time Column definition
  PlutoColumn(
    title: 'time column',
    field: 'time_field',
    type: PlutoColumnType.time(),
  ),
];

List<PlutoRow> rows = [
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value1'),
      'number_field': PlutoCell(value: 2020),
      'select_field': PlutoCell(value: 'item1'),
      'date_field': PlutoCell(value: '2020-08-06'),
      'time_field': PlutoCell(value: '12:30'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value2'),
      'number_field': PlutoCell(value: 2021),
      'select_field': PlutoCell(value: 'item2'),
      'date_field': PlutoCell(value: '2020-08-07'),
      'time_field': PlutoCell(value: '18:45'),
    },
  ),
  PlutoRow(
    cells: {
      'text_field': PlutoCell(value: 'Text cell value3'),
      'number_field': PlutoCell(value: 2022),
      'select_field': PlutoCell(value: 'item3'),
      'date_field': PlutoCell(value: '2020-08-08'),
      'time_field': PlutoCell(value: '23:59'),
    },
  ),
];

使用上面创建的数据创建网格。

  @override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('PlutoGrid Demo'),
    ),
    body: Container(
      padding: const EdgeInsets.all(30),
      child: PlutoGrid(
          columns: columns,
          rows: rows,
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          onLoaded: (PlutoGridOnLoadedEvent event) {
            print(event);
          }
      ),
    ),
  );
}

Flutter 版本兼容性

Flutter PlutoGrid
3.0.0 或更高版本 3.0.0-0.pre 或更高版本
2.5.0 或更高版本 2.5.0 或更高版本

其他版本请联系 Issue

Pluto 系列

开发易于使用 Flutter 开发管理页面或 CMS 的包。

支持

Buy me a coffee

许可证

MIT

GitHub

查看 Github