Flutter中Table组件如何绑定List数据渲染表头后的数据行

Table组件的children属性接收List<TableRow>类型参数，你只需要把固定表头、遍历任务列表生成的数据行合并到同一个列表里，就能完成数据渲染，不需要单独写外层循环维护索引。

写法1：无索引遍历（推荐，代码更简洁） #

用Dart展开运算符...配合列表map方法，直接遍历数据源生成行，不会出现索引越界问题：

// 提前定义好Task模型和数据源，示例：
// class Task {
//   final String user;
//   final String address;
//   final String comment;
//   Task({required this.user, required this.address, required this.comment});
// }
// final List<Task> task = []; // 替换成你的实际业务数据

Table TaskTable() {
  return Table(
      defaultColumnWidth: FixedColumnWidth(120.sp),
      border: TableBorder.all(
        width: 1, 
        color: Color.fromRGBO(221, 221, 221, 1), 
        style: BorderStyle.solid
      ),
      children: <TableRow>[
        // 固定表头行
        TableRow(
          children: [
            Text('User'),
            Text('Address'),
            Text('Comment'),
          ]
        ),
        // 动态生成所有数据行
        ...task.map((item) {
          return TableRow(
            children: [
              Text(item.user),
              Text(item.address),
              Text(item.comment),
            ]
          );
        }).toList()
      ],
  );
}

写法2：通过索引i访问元素 #

如果你确实需要用索引i访问列表项，用List.generate生成数据行即可，替换上面map部分的代码：

// 放在表头行后面，效果和map写法完全一致
...List.generate(task.length, (i) {
  return TableRow(
    children: [
      Text(task[i].user),
      Text(task[i].address),
      Text(task[i].comment),
    ]
  );
})

避坑提示 #

• 每一个TableRow的children组件数量必须和表头列数对齐，当前表头是3列，所有数据行都必须传3个组件，否则会抛布局异常。
• map方法返回的是可迭代对象，必须调用.toList()转成List类型，才能用展开运算符合并到children列表里。
• 现在Flutter默认的Dart SDK版本都支持展开运算符语法，不需要额外做低版本兼容。
• 当task列表为空时，上述写法只会渲染表头，不会触发数组越界，不需要额外做空判断。

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