是否有办法优化 pluto_grid 中大量列的表格渲染？

Question

我正在开发一个 Flutter 项目，我需要使用 PlutoGrid 小部件显示数据表。该表正在渲染来自地图列表的数据，每个地图都包含有关案例的信息（例如眼睛颜色、缺失日期等）。现在表中的数据并不多。即使是 2-3 行，渲染速度也会非常慢。这些只是几列。实际数据有太多列。所以我什至不确定需要多长时间下面是我正在使用的代码片段：

class WebCaseList extends StatelessWidget {
  final List<Map<String, dynamic>> caseList;

  WebCaseList({required this.caseList});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.only(right: 20.0, top: 20, left: 20),
      child: PlutoGrid(
        columns: _buildColumns(),
        rows: _buildRows(),
        mode: PlutoGridMode.readOnly,
        onChanged: (PlutoGridOnChangedEvent event) {},
        configuration: PlutoGridConfiguration(
          style: PlutoGridStyleConfig(
            menuBackgroundColor: Color.fromRGBO(43, 58, 85, 1),
            rowHeight: 70,
            defaultColumnTitlePadding: EdgeInsets.only(left: 20),
            enableCellBorderHorizontal: true,
            gridBorderRadius: BorderRadius.circular(8),
            gridBorderColor: Color(0xFFE2E9EA),
            enableGridBorderShadow: true,
            enableCellBorderVertical: false,
          ),
          columnSize: const PlutoGridColumnSizeConfig(
              autoSizeMode: PlutoAutoSizeMode.scale,
              resizeMode: PlutoResizeMode.normal),
          scrollbar: PlutoGridScrollbarConfig(
            scrollbarThickness: 8,
            scrollbarRadius: Radius.circular(8),
            scrollBarColor: Color(0XFF40038D),
          ),
        ),
      ),
    );
  }

  List<PlutoColumn> _buildColumns() {
    return [
      PlutoColumn(
          title: 'Eye Natural Color',
          field: 'eyeNaturalColor',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Missing Date',
          field: 'missingDate',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Sex',
          field: 'sex',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Number',
          field: 'caseNumber',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Manager',
          field: 'caseManager',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'First Name',
          field: 'firstName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Middle Name',
          field: 'middleName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Last Name',
          field: 'lastName',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Case Type',
          field: 'caseType',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Request Type',
          field: 'requestType',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'City',
          field: 'city',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'ZIP',
          field: 'zip',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'State',
          field: 'state',
          type: PlutoColumnType.text(),
          minWidth: 150),
      PlutoColumn(
          title: 'Country',
          field: 'country',
          type: PlutoColumnType.text(),
          minWidth: 150),
    ];
  }

  List<PlutoRow> _buildRows() {
    return caseList.map((caseItem) {
      return PlutoRow(cells: {
        'eyeNaturalColor': PlutoCell(value: caseItem['eyeNaturalColor'] ?? ''),
        'sex': PlutoCell(value: caseItem['sex'] ?? ''),
        'missingDate': PlutoCell(value: caseItem['missingDate'] ?? ''),
        'caseNumber': PlutoCell(value: caseItem['caseNumber'] ?? ''),
        'caseManager': PlutoCell(value: caseItem['caseManager'] ?? ''),
        'firstName': PlutoCell(value: caseItem['firstName'] ?? ''),
        'middleName': PlutoCell(value: caseItem['middleName'] ?? ''),
        'lastName': PlutoCell(value: caseItem['lastName'] ?? ''),
        'caseType': PlutoCell(value: caseItem['caseType'] ?? ''),
        'requestType': PlutoCell(value: caseItem['requestType'] ?? ''),
        'city': PlutoCell(value: caseItem['city'] ?? ''),
        'zip': PlutoCell(value: caseItem['zip'] ?? ''),
        'state': PlutoCell(value: caseItem['state'] ?? ''),
        'country': PlutoCell(value: caseItem['country'] ?? ''),
      });
    }).toList();
  }
}

Answer 1

我们可以这样做：

PlutoColumn(
          title: columnDef['title']!,
          field: columnDef['field']!,
          type: PlutoColumnType.text(),
          backgroundColor: const Color(0xFF2B3A55),
)