Flutter表格展示与管理插件pluto_grid_plus的使用

PlutoGrid Plus for flutter - v8.4.3

PlutoGrid Plus 是对 PlutoGrid 的维护版本。它是一个功能强大的数据网格组件，支持键盘操作，适用于多种场景，如移动单元格。PlutoGrid 主要针对 Web 和桌面环境进行开发，但也考虑了移动设备上的改进。如果您在使用过程中有任何问题或建议，可以通过 GitHub 提交 Issue。

Demo Web

Demo Web
您可以在这里尝试各种功能和用法，并查看示例代码。

Pub.Dev

Pub.Dev
请访问官方分发站点，了解如何安装和使用 PlutoGrid。

文档

Documentation
文档中提供了更多详细信息。

ChangeLog

ChangeLog
请注意版本变更时的改动。

Issue

Issue
报告任何问题或错误。

相关包

• PlutoGrid
• PlutoMenuBar
• PlutoLayout

捐赠

Buy me a coffee

JetBrains 提供免费许可

IDE license support

示例代码

以下是一个完整的示例代码，展示了如何使用 pluto_grid_plus 插件创建一个简单的表格。

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

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'PlutoGrid Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const PlutoGridExamplePage(),
    );
  }
}

/// PlutoGrid 示例
///
/// 更多示例请访问 GitHub 上的 Demo Web 链接。
class PlutoGridExamplePage extends StatefulWidget {
  const PlutoGridExamplePage({super.key});

  @override
  State<PlutoGridExamplePage> createState() => _PlutoGridExamplePageState();
}

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> {
  final List<PlutoColumn> columns = <PlutoColumn>[
    PlutoColumn(
      title: 'Id',
      field: 'id',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Name',
      field: 'name',
      type: PlutoColumnType.text(),
    ),
    PlutoColumn(
      title: 'Age',
      field: 'age',
      type: PlutoColumnType.number(),
    ),
    PlutoColumn(
      title: 'Role',
      field: 'role',
      type: PlutoColumnType.select(<String>[
        'Programmer',
        'Designer',
        'Owner',
      ]),
    ),
    PlutoColumn(
      title: 'Role 2',
      field: 'role2',
      type: PlutoColumnType.select(
        <String>[
          'Programmer',
          'Designer',
          'Owner',
        ],
        builder: (item) {
          return Row(children: [
            Icon(item == 'Programmer' ? Icons.code : Icons.design_services),
            const SizedBox(width: 8),
            Text(item),
          ]);
        },
      ),
    ),
    PlutoColumn(
      title: 'Joined',
      field: 'joined',
      type: PlutoColumnType.date(),
    ),
    PlutoColumn(
      title: 'Working time',
      field: 'working_time',
      type: PlutoColumnType.time(),
    ),
    PlutoColumn(
      title: 'Salary',
      field: 'salary',
      type: PlutoColumnType.currency(),
      footerRenderer: (rendererContext) {
        return PlutoAggregateColumnFooter(
          rendererContext: rendererContext,
          formatAsCurrency: true,
          type: PlutoAggregateColumnType.sum,
          format: '#,###',
          alignment: Alignment.center,
          titleSpanBuilder: (text) {
            return [
              const TextSpan(
                text: 'Sum',
                style: TextStyle(color: Colors.red),
              ),
              const TextSpan(text: ' : '),
              TextSpan(text: text),
            ];
          },
        );
      },
    ),
  ];

  final List<PlutoRow> rows = [
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user1'),
        'name': PlutoCell(value: 'Mike'),
        'age': PlutoCell(value: 20),
        'role': PlutoCell(value: 'Programmer'),
        'role2': PlutoCell(value: 'Programmer'),
        'joined': PlutoCell(value: '2021-01-01'),
        'working_time': PlutoCell(value: '09:00'),
        'salary': PlutoCell(value: 300),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user2'),
        'name': PlutoCell(value: 'Jack'),
        'age': PlutoCell(value: 25),
        'role': PlutoCell(value: 'Designer'),
        'role2': PlutoCell(value: 'Designer'),
        'joined': PlutoCell(value: '2021-02-01'),
        'working_time': PlutoCell(value: '10:00'),
        'salary': PlutoCell(value: 400),
      },
    ),
    PlutoRow(
      cells: {
        'id': PlutoCell(value: 'user3'),
        'name': PlutoCell(value: 'Suzi'),
        'age': PlutoCell(value: 40),
        'role': PlutoCell(value: 'Owner'),
        'role2': PlutoCell(value: 'Owner'),
        'joined': PlutoCell(value: '2021-03-01'),
        'working_time': PlutoCell(value: '11:00'),
        'salary': PlutoCell(value: 700),
      },
    ),
  ];

  /// 可以省略 columnGroups，用于分组列
  final List<PlutoColumnGroup> columnGroups = [
    PlutoColumnGroup(title: 'Id', fields: ['id'], expandedColumn: true),
    PlutoColumnGroup(title: 'User information', fields: ['name', 'age']),
    PlutoColumnGroup(title: 'Status', children: [
      PlutoColumnGroup(title: 'A', fields: ['role'], expandedColumn: true),
      PlutoColumnGroup(
          title: 'Etc.', fields: ['joined', 'working_time', 'role2']),
    ]),
  ];

  /// [PlutoGridStateManager] 提供了许多方法和属性，可以在运行时动态操作表格。
  /// 通过传递 [onLoaded] 回调，可以在运行时动态操作表格。
  late final PlutoGridStateManager stateManager;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('PlutoGrid Example'),
      ),
      body: Container(
        padding: const EdgeInsets.all(15),
        child: PlutoGrid(
          columns: columns,
          rows: rows,
          columnGroups: columnGroups,
          onLoaded: (PlutoGridOnLoadedEvent event) {
            stateManager = event.stateManager;
            stateManager.setShowColumnFilter(true);
          },
          onChanged: (PlutoGridOnChangedEvent event) {
            print(event);
          },
          configuration: const PlutoGridConfiguration(),
          selectDateCallback: (PlutoCell cell, PlutoColumn column) async {
            return showDatePicker(
                context: context,
                initialDate: PlutoDateTimeHelper.parseOrNullWithFormat(
                  cell.value,
                  column.type.date.format,
                ) ?? DateTime.now(),
                firstDate: column.type.date.startDate ?? DateTime(0),
                lastDate: column.type.date.endDate ?? DateTime(9999)
            );
          },
        ),
      ),
    );
  }
}

兼容的 Flutter 版本

对于其他版本，请联系 Issue。

希望这个示例能帮助您快速上手 pluto_grid_plus 插件。如果有任何问题，欢迎随时提问！