PlutoGrid API完全参考：开发者必知的核心类与方法-开发者社区

PlutoGrid API完全参考：开发者必知的核心类与方法

【免费下载链接】pluto_gridPlutoGrid is a dataGrid for flutter that can be controlled by the keyboard on desktop and web. Of course, it works well on Android and IOS.项目地址: https://gitcode.com/gh_mirrors/pl/pluto_grid

PlutoGrid是一款功能强大的Flutter数据表格组件，支持桌面端和Web端的键盘操作，同时在Android和iOS上也有出色表现。本文将详细介绍PlutoGrid的核心API，帮助开发者快速掌握这个强大工具的使用方法。

一、PlutoGrid核心类

1.1 PlutoGrid类

PlutoGrid是整个组件的核心类，用于创建和配置数据表格。它接收列和行数据，并以网格形式展示。

PlutoGrid({ required this.columns, required this.rows, this.columnGroups, this.onLoaded, this.onChanged, this.onSelected, this.onSorted, this.onRowChecked, this.onRowDoubleTap, this.onRowSecondaryTap, this.onRowsMoved, this.onColumnsMoved, this.createHeader, this.createFooter, this.noRowsWidget, this.rowColorCallback, this.columnMenuDelegate, this.configuration = const PlutoGridConfiguration(), this.notifierFilterResolver, this.mode = PlutoGridMode.normal, });

主要参数说明：

columns: 表格列配置，类型为List<PlutoColumn>
rows: 表格行数据，类型为List<PlutoRow>
mode: 表格模式，如普通模式、只读模式、选择模式等
onLoaded: 表格加载完成后的回调
onChanged: 单元格值变化时的回调

使用示例：

PlutoGrid( columns: columns, rows: rows, onLoaded: (event) { stateManager = event.stateManager; }, onChanged: (event) { print('Cell value changed: ${event.value}'); }, mode: PlutoGridMode.normal, )

1.2 PlutoColumn类

PlutoColumn类定义了表格列的属性和行为。

PlutoColumn({ required this.title, required this.field, required this.type, this.readOnly = false, this.width = PlutoGridSettings.columnWidth, this.minWidth = PlutoGridSettings.minColumnWidth, this.textAlign = PlutoColumnTextAlign.start, this.titleTextAlign = PlutoColumnTextAlign.start, this.frozen = PlutoColumnFrozen.none, this.sort = PlutoColumnSort.none, this.formatter, this.renderer, // 其他属性... });

主要参数说明：

title: 列标题，显示在列头部
field: 列对应的字段名，用于匹配行数据
type: 列类型，如文本、数字、日期等
width: 列宽度
frozen: 是否冻结列，可冻结在左侧或右侧
sort: 排序方式
formatter: 单元格值格式化函数
renderer: 自定义单元格渲染器

列类型包括：

PlutoColumnType.text(): 文本类型
PlutoColumnType.number(): 数字类型
PlutoColumnType.currency(): 货币类型
PlutoColumnType.select(): 选择类型
PlutoColumnType.date(): 日期类型
PlutoColumnType.time(): 时间类型

1.3 PlutoRow类

PlutoRow类表示表格中的一行数据。

PlutoRow({ required this.cells, PlutoRowType? type, this.sortIdx = 0, bool checked = false, Key? key, });

主要参数说明：

cells: 单元格数据，类型为Map<String, PlutoCell>
type: 行类型，如普通行、组行等
checked: 行是否被选中（当启用行选择功能时）

使用示例：

PlutoRow( cells: { 'name': PlutoCell(value: 'John Doe'), 'age': PlutoCell(value: 30), 'email': PlutoCell(value: 'john@example.com'), }, )

二、状态管理

2.1 PlutoGridStateManager

PlutoGridStateManager是管理表格状态的核心类，提供了丰富的方法来操作表格。

通过onLoaded回调获取状态管理器：

PlutoGrid( onLoaded: (PlutoGridOnLoadedEvent event) { stateManager = event.stateManager; }, // 其他参数... )

常用方法：

setSelectingMode: 设置选择模式（单元格、行、列等）
setPage: 设置当前页码（用于分页）
setShowLoading: 显示或隐藏加载状态
sortByColumn: 按列排序
filterRows: 过滤行数据
insertRows: 插入行
removeRows: 删除行

三、事件处理

PlutoGrid提供了多种事件回调，方便开发者处理用户交互：

onChanged: 单元格值变化时触发
onSelected: 行被选择时触发（在选择模式下）
onSorted: 列排序时触发
onRowChecked: 行复选框状态变化时触发
onRowDoubleTap: 行被双击时触发
onRowsMoved: 行被拖动移动后触发
onColumnsMoved: 列被拖动移动后触发

事件处理示例：

PlutoGrid( onChanged: (PlutoGridOnChangedEvent event) { print('Cell changed - Row: ${event.rowIdx}, Column: ${event.column.field}, Value: ${event.value}'); }, onSelected: (PlutoGridOnSelectedEvent event) { print('Selected row: ${event.row.cells}'); }, // 其他参数... )

四、高级功能

4.1 自定义渲染

通过renderer参数可以自定义单元格的渲染：

PlutoColumn( title: 'Status', field: 'status', type: PlutoColumnType.text(), renderer: (rendererContext) { Color color; String text; switch (rendererContext.cell.value) { case 'active': color = Colors.green; text = 'Active'; break; case 'inactive': color = Colors.grey; text = 'Inactive'; break; case 'pending': color = Colors.orange; text = 'Pending'; break; default: color = Colors.black; text = rendererContext.cell.value.toString(); } return Container( padding: EdgeInsets.symmetric(horizontal: 8), child: Text( text, style: TextStyle( color: color, fontWeight: FontWeight.bold, ), ), ); }, )

4.2 分组功能

PlutoGrid支持行分组和列分组功能。

行分组示例：

PlutoRow( type: PlutoRowType.group( children: FilteredList(initialList: [ PlutoRow(cells: {/* 子行数据 */}), PlutoRow(cells: {/* 子行数据 */}), ]), ), cells: {/* 组行数据 */}, )

列分组示例：

List<PlutoColumnGroup> columnGroups = [ PlutoColumnGroup( title: 'Personal Info', fields: ['name', 'age', 'email'], expandedColumn: true, ), PlutoColumnGroup( title: 'Work Info', fields: ['position', 'department', 'salary'], ), ]; PlutoGrid( columns: columns, rows: rows, columnGroups: columnGroups, // 其他参数... )

4.3 分页功能

PlutoGrid提供了内置的分页组件PlutoPagination：

PlutoGrid( columns: columns, rows: rows, createFooter: (stateManager) { stateManager.setPageSize(10); // 每页显示10行 return PlutoPagination(stateManager); }, // 其他参数... )

五、配置与样式

通过PlutoGridConfiguration可以自定义表格的样式和行为：

PlutoGrid( columns: columns, rows: rows, configuration: PlutoGridConfiguration( style: PlutoGridStyleConfig( gridBackgroundColor: Colors.white, cellTextStyle: TextStyle(color: Colors.black87, fontSize: 14), columnTextStyle: TextStyle(color: Colors.black, fontWeight: FontWeight.bold), // 其他样式配置... ), localeText: PlutoGridLocaleText( filterContains: '包含', filterEquals: '等于', // 其他文本配置... ), // 其他配置... ), )

六、安装与使用

要使用PlutoGrid，首先需要在pubspec.yaml中添加依赖：

dependencies: pluto_grid: ^3.0.0

然后运行以下命令安装依赖：

git clone https://gitcode.com/gh_mirrors/pl/pluto_grid cd pluto_grid flutter pub get

在代码中导入并使用PlutoGrid：

import 'package:pluto_grid/pluto_grid.dart'; // 在Widget中使用 @override Widget build(BuildContext context) { return Scaffold( body: PlutoGrid( columns: [ PlutoColumn( title: 'Name', field: 'name', type: PlutoColumnType.text(), ), PlutoColumn( title: 'Age', field: 'age', type: PlutoColumnType.number(), ), // 更多列... ], rows: [ PlutoRow( cells: { 'name': PlutoCell(value: 'Alice'), 'age': PlutoCell(value: 25), }, ), // 更多行... ], ), ); }