Syncfusion SFDataGrid列与单元格数据匹配错误求助

在Flutter中使用Syncfusion的SfDataGrid实现表格功能时，所有数据均可正常显示，但单元格数据与对应列名不匹配，出现列内容错位的情况。

现有代码 #

表格定义代码 #

SfDataGridTheme(
          data: SfDataGridThemeData(
              headerColor: Theme.of(context).colorScheme.primary),
          child: SfDataGrid(
            key: key,
            allowPullToRefresh: true,
            source: InvestmentDataSource(
              investmentProvider: investmentProvider,
              investments: investmentProvider.investments,
            ),
            columnWidthMode: ColumnWidthMode.fitByColumnName,
            allowEditing: false,
            allowSorting: true,
            columns: <GridColumn>[ // 列定义
              getGridColumn('id', 'id'),
              getGridColumn('initAmount', 'Initial'),
              getGridColumn('recurringAmount', 'Rec. Amount'),
              getGridColumn('frequency', 'Frequency'),
              getGridColumn('duration', 'Duration'),
              getGridColumn('estReturn', 'Est. Return'),
              getGridColumn('category', 'Category'),
              getGridColumn('startDate', 'Start'),
              getGridColumn('endDate', 'End'),
              getGridColumn('action', 'Action'),
            ],
          ),
        ),

GridColumn getGridColumn(String colName, String displayText,
      {bool visibility = true}) {
    return GridColumn(
      visible: visibility,
      columnName: colName,
      label: Container(
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        alignment: Alignment.centerLeft,
        child: Text(
          displayText,
          overflow: TextOverflow.ellipsis,
        ),
      ),
    );
  }

表格行创建代码 #

List<DataGridRow> createDataGridRows(List<Investment> investments) {
    return investments
        .map<DataGridRow>(
          (dataGridRow) => DataGridRow( // 行与单元格定义
            cells: [
              DataGridCell<int>(columnName: 'id', value: dataGridRow.key),
              DataGridCell<String>(
                  columnName: 'category', value: dataGridRow.investmentType),
              DataGridCell<double>(
                  columnName: 'initAmount',
                  value: dataGridRow.initialInvestment),
              DataGridCell<double>(
                  columnName: 'recurringAmount',
                  value: dataGridRow.recurringAddition),
              DataGridCell<String>(
                  columnName: 'frequency', value: dataGridRow.frequency),
              DataGridCell<num>(
                  columnName: 'duration', value: dataGridRow.investmentTerm),
              DataGridCell<double>(
                  columnName: 'estReturn', value: dataGridRow.terminalValue),
              DataGridCell<String>(
                  columnName: 'startDate', value: dataGridRow.startDate),
              DataGridCell<String>(
                  columnName: 'endDate', value: dataGridRow.endDate),
              DataGridCell<Widget>(
                columnName: 'action',
                value: null,
              ),
            ],
          ),
        )
        .toList();
  }

解决方法 #

Syncfusion SfDataGrid是按顺序匹配列与单元格的，即使columnName设置正确，只要columns列表的顺序和DataGridRow.cells的顺序不一致，就会出现内容错位。

当前代码中，columns的顺序是：id → initAmount → recurringAmount → frequency → duration → estReturn → category → startDate → endDate → action

但cells的顺序中，第二个单元格是category，而对应列的第二个是initAmount，这就导致了错位。

修正后的行创建代码 #

调整cells的顺序，使其与columns列表的顺序完全一致：

List<DataGridRow> createDataGridRows(List<Investment> investments) {
    return investments
        .map<DataGridRow>(
          (dataGridRow) => DataGridRow(
            cells: [
              DataGridCell<int>(columnName: 'id', value: dataGridRow.key),
              // 调整顺序：将initAmount移到第二位，对应columns的第二个列
              DataGridCell<double>(
                  columnName: 'initAmount',
                  value: dataGridRow.initialInvestment),
              DataGridCell<double>(
                  columnName: 'recurringAmount',
                  value: dataGridRow.recurringAddition),
              DataGridCell<String>(
                  columnName: 'frequency', value: dataGridRow.frequency),
              DataGridCell<num>(
                  columnName: 'duration', value: dataGridRow.investmentTerm),
              DataGridCell<double>(
                  columnName: 'estReturn', value: dataGridRow.terminalValue),
              // category移到第七位，对应columns的第七个列
              DataGridCell<String>(
                  columnName: 'category', value: dataGridRow.investmentType),
              DataGridCell<String>(
                  columnName: 'startDate', value: dataGridRow.startDate),
              DataGridCell<String>(
                  columnName: 'endDate', value: dataGridRow.endDate),
              DataGridCell<Widget>(
                columnName: 'action',
                value: null,
              ),
            ],
          ),
        )
        .toList();
  }

内容的提问来源于stack exchange，提问作者RV.