Flutter如何显示含空单元格与空行的CSV表格？

问题描述 #

我有一份来自Google Analytics的CSV文件，其中包含空单元格和空行，在Flutter应用中展示时出现报错：

Table containing irregular row lengths. Every TableRow in a Table must have the same number of children so that every cell is filled. Otherwise, the table will contain holes.

希望能正常展示表格（保留空单元格或填充内容均可），尝试修改table.dart文件消除报错但导致文件损坏。以下是加载CSV和构建Table的代码：

加载CSV代码 #

List<List<dynamic>> data = [];
loadAsset() async {
  final myData = await rootBundle.loadString("assets/data/statics.csv");
  List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);
  return csvTable;
}

构建Table代码 #

class _TableLayoutState extends State<StaticsScreen> {
  void load() async {
    var newdata = await loadAsset();
    setState(() {
      data = newdata;
    });
    print(data);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        title: Text("Statics"),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
      floatingActionButton:
          FloatingActionButton(child: Icon(Icons.refresh), onPressed: load),
      body: ListView(children: <Widget>[
        Table(
          children: data.map((item) {
            return TableRow(
              children: item.map((row) {
                return Text(row.toString());
              }).toList(),
            );
          }).toList(),
        ),
      ]),
    ));
  }
}

CSV数据样图：

解决方案 #

核心问题是CSV解析后每行的列数不一致，Flutter的Table组件要求所有TableRow的子元素数量必须统一。可以通过以下方法处理：

1. 统一所有行的列数（填充空单元格） #

先确定CSV中的最大列数，再将每行数据补齐到该列数，不足的位置用空字符串或自定义占位符填充：

修改loadAsset方法，添加数据处理逻辑：

List<List<dynamic>> data = [];
loadAsset() async {
  final myData = await rootBundle.loadString("assets/data/statics.csv");
  List<List<dynamic>> csvTable = CsvToListConverter().convert(myData);

  // 获取CSV中的最大列数
  int maxColumnCount = csvTable.isNotEmpty 
      ? csvTable.reduce((a, b) => a.length > b.length ? a : b).length 
      : 0;

  // 统一每行的列数，不足补空字符串（可替换为"-"等占位符）
  final processedData = csvTable.map((row) {
    final filledRow = List<dynamic>.from(row);
    while (filledRow.length < maxColumnCount) {
      filledRow.add('');
    }
    return filledRow;
  }).toList();

  return processedData;
}

2. 过滤空行（可选） #

如果不需要展示CSV中的空行，可以在处理后过滤掉全空的行：

// 在上面的processedData生成后添加
final filteredData = processedData.where((row) {
  return row.any((cell) => cell != null && cell.toString().trim().isNotEmpty);
}).toList();
return filteredData;

注意事项 #

• 禁止修改Flutter源码（如table.dart），这会导致版本升级冲突和未知BUG，所有适配逻辑应放在自己的业务代码中。
• 若需要更复杂的表格功能，可考虑使用第三方表格组件（如data_table_2），它们对不规则数据的兼容性更强。

内容的提问来源于stack exchange，提问作者Cthulhu R'lyeh