如何从Flutter ListView动态构建PlutoGrid行?

3
< p > PlutoGrid 文档中显示了如下的行定义。我该如何从Flutter类的列表动态创建行?我无法找到任何构建器方法或示例代码,展示如何完成此操作。

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),
      },
    ),
    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),
      },
    ),
    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),
      },
    ),
  ];

这是我希望在 Pluto 网格中显示的多个类之一。我不会显示 ID 字段。

  int userId = 0;
  String fullName = '';
  double amount = 0;

  ActivitiesSummaryReportLine(
      {this.userId = 0, this.fullName = '', this.amount = 0});

  ActivitiesSummaryReportLine.fromJson(Map<String, dynamic> json) {
    userId = json['user_id'];
    fullName = json['full_name'];
    amount = (json['amount'] as num).toDouble();
  }

将你想要创建的行的源类添加进去。将它添加到问题中,让我们看一下。 - THEODORE
1
好的,我现在明白你想做什么了。请将原始JSON响应添加到问题中。您可以只放其中的一部分或上传到某个地方并添加链接。 - THEODORE
我目前没有实际的回答,我只是在根据代码工作。 - markhorrocks
你的问题清晰地展示了所需的结果。它并没有展示任何重要部分的初始数据或结构。 - THEODORE
1个回答

3

您可以使用map动态地向空列表添加新行或转换您的对象:

// Load your data
final lines = [
  ActivitiesSummaryReportLine(...),
  ActivitiesSummaryReportLine(...),
];

// Create PlutoRows in a loop
final rows = <PlutoRow>[];
for (var line in lines) {
  rows.add(
    PlutoRow(
      cells: {
        'userId': PlutoCell(value: line.userId),
        'fullName': PlutoCell(value: line.fullName),
        'amount': PlutoCell(value: line.amount),
      },
    ),
  );
}

// Alternate syntax using map
final rows = lines.map((line) => PlutoRow(
  cells: {
    'userId': PlutoCell(value: line.userId),
    'fullName': PlutoCell(value: line.fullName),
    'amount': PlutoCell(value: line.amount),
  },
)).toList();


现在您可以将行分配给您的网格:
@override
Widget build(BuildContext context) {
  return Scaffold(
    body: PlutoGrid(
      columns: ...,
      rows: rows,
      columnGroups: ...,
      configuration: const PlutoGridConfiguration(),
    ),
  );
}

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接