Flutter自定义网格插件pluto_grid_customized的使用
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,
),
],
),
),
),
),
),
);
}
}
说明
-
导入库:
import 'package:flutter/material.dart'; import 'package:pluto_grid_customized/pluto_grid_customized.dart';
-
生成列数据:
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), }, ), ];
-
创建网格:
[@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
更多关于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),
}),
];
}
}
在这个示例中,我们做了以下几件事:
-
定义网格的列:使用
PlutoColumn
定义了两列,一列是文本类型,另一列是数字类型。对于文本类型的列,我们自定义了一个渲染器,该渲染器根据行是否被选中来改变背景颜色。 -
定义网格的行:使用
PlutoRow
定义了几行数据。 -
在
PlutoGrid
中配置网格:设置了列和行,并添加了onChanged
和onSelected
回调来处理网格的变化和选择事件。onGridCreated
回调用于获取PlutoGridState
实例,以便进行进一步的自定义设置(例如调整列宽)。
这个示例展示了如何自定义pluto_grid
的单元格渲染器,当然,pluto_grid
提供了很多其他自定义选项,你可以根据需求进一步扩展和定制。如果你确实需要一个名为pluto_grid_customized
的特定包,并且它有特定的API或功能,请查阅该包的文档以获取更详细的信息和示例。