如何在Flutter中根据用户输入的三个列表动态生成数据表格

前置逻辑处理 #

• 首先确保用户输入的两个列表px和x长度完全相同，否则会出现索引异常
• 第三个Multiply列表不需要用户输入，可通过遍历前两个列表对应位置元素相乘自动生成，示例生成代码：

List<double> px = [0.1, 0.2, 0.3];
List<int> x = [0, 1, 2];
// 自动生成Multiply列表
List<double> multiply = List.generate(px.length, (index) => px[index] * x[index]);

表格渲染代码 #

直接用Flutter官方的DataTable组件实现，完整示例代码如下：

import 'package:flutter/material.dart';

class DynamicTablePage extends StatefulWidget {
  const DynamicTablePage({super.key});

  @override
  State<DynamicTablePage> createState() => _DynamicTablePageState();
}

class _DynamicTablePageState extends State<DynamicTablePage> {
  // 示例用户输入列表，可替换为用户实际输入内容
  List<double> px = [0.1, 0.2, 0.3, 0.4, 0.5];
  List<int> x = [0, 1, 2, 3, 4];

  @override
  Widget build(BuildContext context) {
    // 自动计算第三列数据
    List<double> multiply = List.generate(px.length, (index) => px[index] * x[index]);
    
    return Scaffold(
      appBar: AppBar(title: const Text("动态数据表格")),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: DataTable(
          border: TableBorder.all(width: 1, color: Colors.grey),
          columns: const [
            DataColumn(label: Text("px")),
            DataColumn(label: Text("x")),
            DataColumn(label: Text("Multiply")),
          ],
          // 动态生成每行数据
          rows: List.generate(px.length, (index) {
            return DataRow(cells: [
              DataCell(Text(px[index].toString())),
              DataCell(Text(x[index].toString())),
              // 可选：保留2位小数处理精度问题
              DataCell(Text(multiply[index].toStringAsFixed(2))),
            ]);
          }),
        ),
      ),
    );
  }
}

扩展说明 #

• 如果需要支持用户实时输入修改列表值，可以配合TextField组件获取用户输入，转成对应数值类型后更新px和x列表，调用setState即可刷新表格数据
• 列表长度无固定限制，完全跟随用户输入的px和x列表长度动态适配
• 如果遇到浮点运算精度问题，可以引入decimal库处理高精度数值计算

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