Flutter开发：如何基于三个用户输入的列表创建指定样式表格

实现步骤 #

你持有三个等长的用户输入列表，每一行的三个数据分别对应三个列表相同下标的元素，直接通过遍历拼接表格行即可完成开发：

1. 首先确认你的三个数据源格式：

// 用户输入生成的三个列表
final List<int> list1 = [1,2,3,......];
final List<double> list2 = [0.1,0.2,0.3,......];
final List<double> list3 = [0.5,0.10,6.0,......];

2. 直接使用Flutter原生Table组件构建和示例一致的网格表格，代码如下：

// 先做长度校验，避免下标越界
if (list1.length != list2.length || list1.length != list3.length) {
  // 可根据业务需求处理长度不一致的场景，比如提示用户输入有误
  return const Text("数据源长度不一致");
}
return Table(
  border: TableBorder.all(color: Colors.grey.shade400),
  columnWidths: const {
    0: FlexColumnWidth(1),
    1: FlexColumnWidth(1),
    2: FlexColumnWidth(1),
  },
  children: [
    // 自定义表头，文字和样式可按需调整
    const TableRow(
      decoration: BoxDecoration(color: Color(0xFFF5F5F5)),
      children: [
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 6),
          child: Text('列1', textAlign: TextAlign.center, style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 6),
          child: Text('列2', textAlign: TextAlign.center, style: TextStyle(fontWeight: FontWeight.bold)),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 10, horizontal: 6),
          child: Text('列3', textAlign: TextAlign.center, style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      ]
    ),
    // 遍历生成数据行
    ...List.generate(list1.length, (index) => TableRow(
      children: [
        Padding(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 6),
          child: Text(list1[index].toString(), textAlign: TextAlign.center),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 6),
          child: Text(list2[index].toString(), textAlign: TextAlign.center),
        ),
        Padding(
          padding: EdgeInsets.symmetric(vertical: 8, horizontal: 6),
          child: Text(list3[index].toString(), textAlign: TextAlign.center),
        ),
      ]
    ))
  ],
);

注意事项 #

• 如果列表长度过长，可将Table嵌套进SingleChildScrollView组件实现滚动效果
• 可自行调整TableBorder的参数、单元格内边距、文字样式匹配你的设计需求
• 数值的格式化可通过toStringAsFixed等方法调整，比如保留2位小数展示

内容的提问来源于stack exchange，提问作者Muhammad Awais Younas