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_gridPlutoGrid是一款功能强大的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: 表格列配置类型为ListPlutoColumnrows: 表格行数据类型为ListPlutoRowmode: 表格模式如普通模式、只读模式、选择模式等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: 单元格数据类型为MapString, PlutoCelltype: 行类型如普通行、组行等checked: 行是否被选中当启用行选择功能时使用示例PlutoRow( cells: { name: PlutoCell(value: John Doe), age: PlutoCell(value: 30), email: PlutoCell(value: johnexample.com), }, )二、状态管理2.1 PlutoGridStateManagerPlutoGridStateManager是管理表格状态的核心类提供了丰富的方法来操作表格。通过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: {/* 组行数据 */}, )列分组示例ListPlutoColumnGroup 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提供了内置的分页组件PlutoPaginationPlutoGrid( 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在代码中导入并使用PlutoGridimport 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), }, ), // 更多行... ], ), ); }七、总结PlutoGrid是一个功能丰富、高度可定制的Flutter数据表格组件。通过本文介绍的核心API开发者可以快速上手并充分利用PlutoGrid的强大功能。无论是简单的数据展示还是复杂的交互需求PlutoGrid都能满足开发需求帮助构建出色的跨平台应用。掌握这些核心类和方法后你可以开始探索PlutoGrid的更多高级特性如自定义单元格编辑、复杂筛选、导出功能等。通过灵活运用PlutoGrid你可以为用户提供流畅、高效的数据表格体验。【免费下载链接】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创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考