Flutter自定义网格插件pluto_grid_customized的使用

发布于 1周前 作者 zlyuanteng 来自 Flutter

Flutter 自定义网格插件 pluto_grid_customized 的使用

PlutoGrid 是一个可以在各种情况下通过键盘操作的 DataGrid,例如移动单元格。它主要针对网页和桌面进行开发。对移动设备的改进也在考虑之中。如果您在使用过程中有任何问题或错误,可以通过提交 issue 来反馈。

示例代码

以下是一个完整的示例代码,展示了如何使用 pluto_grid_customized 插件来创建一个自定义网格。

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

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

/// PlutoGrid Example
//
/// For more examples, go to the demo web link on the github below.
class PlutoGridExamplePage extends StatefulWidget {
  const PlutoGridExamplePage({Key? key}) : super(key: key);

  [@override](/user/override)
  State<PlutoGridExamplePage> createState() => _PlutoGridExamplePageState();
}

class _PlutoGridExamplePageState extends State<PlutoGridExamplePage> {
  final List<PlutoColumn> columns = [
    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([
        'Programmer',
        'Designer',
        'Owner',
      ]),
    ),
    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),
            ];
          },
        );
      },
    ),
    PlutoColumn(
      title: 'Deleted',
      field: 'deleted',
      type: PlutoColumnType.customized(PlutoColumnCustomizedBool()),
    ),
  ];

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

  /// columnGroups that can group columns can be omitted.
  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']),
    ]),
  ];

  /// [PlutoGridStateManager] has many methods and properties to dynamically manipulate the grid.
  /// You can manipulate the grid dynamically at runtime by passing this through the [onLoaded] callback.
  late final PlutoGridStateManager stateManager;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      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: PlutoGridConfiguration(
            style: PlutoGridStyleConfig(
              headerDecoration: BoxDecoration(
                color: Colors.blue,
              ),
              leftFrozenDecoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 1),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.5),
                    blurRadius: 5,
                  ),
                ],
              ),
              rightFrozenDecoration: BoxDecoration(
                border: Border.all(color: Colors.black, width: 1),
                boxShadow: [
                  BoxShadow(
                    color: Colors.black.withValues(alpha: 0.5),
                    blurRadius: 5,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

说明

  1. 导入库:

    import 'package:flutter/material.dart';
    import 'package:pluto_grid_customized/pluto_grid_customized.dart';
    
  2. 生成列数据:

    final List<PlutoColumn> columns = [
      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([
          'Programmer',
          'Designer',
          'Owner',
        ]),
      ),
      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),
              ];
            },
          );
        },
      ),
      PlutoColumn(
        title: 'Deleted',
        field: 'deleted',
        type: PlutoColumnType.customized(PlutoColumnCustomizedBool()),
      ),
    ];
    
  3. 生成行数据:

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

    [@override](/user/override)
    Widget build(BuildContext context) {
      return Scaffold(
        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: PlutoGridConfiguration(
              style: PlutoGridStyleConfig(
                headerDecoration: BoxDecoration(
                  color: Colors.blue,
                ),
                leftFrozenDecoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 1),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.5),
                      blurRadius: 5,
                    ),
                  ],
                ),
                rightFrozenDecoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 1),
                  boxShadow: [
                    BoxShadow(
                      color: Colors.black.withValues(alpha: 0.5),
                      blurRadius: 5,
                    ),
                  ],
                ),
              ),
            ),
          ),
        ),
      );
    }
    

更多关于Flutter自定义网格插件pluto_grid_customized的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter自定义网格插件pluto_grid_customized的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何在Flutter中使用自定义网格插件pluto_grid_customized的代码示例。假设你已经在pubspec.yaml文件中添加了pluto_grid依赖项(请注意,pluto_grid_customized并不是一个官方或广泛认可的包名,这里假设你指的是通过扩展pluto_grid来实现自定义功能的场景)。

首先,确保你的pubspec.yaml文件中包含以下依赖项:

dependencies:
  flutter:
    sdk: flutter
  pluto_grid: ^x.y.z  # 请替换为最新版本号

然后,运行flutter pub get来安装依赖。

接下来是一个简单的示例,展示了如何使用pluto_grid并添加一些自定义功能,比如自定义单元格渲染器。

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Pluto Grid Customized Example'),
        ),
        body: PlutoGridExample(),
      ),
    );
  }
}

class PlutoGridExample extends StatefulWidget {
  @override
  _PlutoGridExampleState createState() => _PlutoGridExampleState();
}

class _PlutoGridExampleState extends State<PlutoGridExample> {
  late PlutoGridState gridState;

  @override
  Widget build(BuildContext context) {
    return PlutoGrid(
      columns: _createColumns(),
      rows: _createRows(),
      onChanged: (PlutoGridOnChangedEvent event) {
        setState(() {});
      },
      onSelected: (PlutoGridOnSelectedEvent event) {
        setState(() {});
      },
      gridState: gridState,
      onGridCreated: (PlutoGridState state) {
        gridState = state;
        // 自定义设置,比如调整列宽等
        gridState.setColumnsWidthByContent();
      },
    );
  }

  List<PlutoColumn> _createColumns() {
    return [
      PlutoColumn(
        title: 'Name',
        field: 'name',
        type: PlutoColumnType.text(),
        width: 150,
        renderer: (PlutoGridCellRendererContext context) {
          // 自定义渲染器,例如添加背景颜色
          final textStyle = TextStyle(color: Colors.black);
          return Container(
            decoration: BoxDecoration(
              color: context.row!.isSelected
                  ? Colors.lightBlueAccent.withOpacity(0.3)
                  : Colors.transparent,
            ),
            child: Text(
              context.value ?? '',
              style: textStyle,
            ),
          );
        },
      ),
      PlutoColumn(
        title: 'Age',
        field: 'age',
        type: PlutoColumnType.number(),
        width: 100,
      ),
    ];
  }

  List<PlutoRow> _createRows() {
    return [
      PlutoRow(cells: {
        'name': PlutoCell(value: 'Alice'),
        'age': PlutoCell(value: 30),
      }),
      PlutoRow(cells: {
        'name': PlutoCell(value: 'Bob'),
        'age': PlutoCell(value: 25),
      }),
    ];
  }
}

在这个示例中,我们做了以下几件事:

  1. 定义网格的列:使用PlutoColumn定义了两列,一列是文本类型,另一列是数字类型。对于文本类型的列,我们自定义了一个渲染器,该渲染器根据行是否被选中来改变背景颜色。

  2. 定义网格的行:使用PlutoRow定义了几行数据。

  3. PlutoGrid中配置网格:设置了列和行,并添加了onChangedonSelected回调来处理网格的变化和选择事件。onGridCreated回调用于获取PlutoGridState实例,以便进行进一步的自定义设置(例如调整列宽)。

这个示例展示了如何自定义pluto_grid的单元格渲染器,当然,pluto_grid提供了很多其他自定义选项,你可以根据需求进一步扩展和定制。如果你确实需要一个名为pluto_grid_customized的特定包,并且它有特定的API或功能,请查阅该包的文档以获取更详细的信息和示例。

回到顶部