Flutter如何获取TextField逗号分隔用户输入并完成计算输出表格

1. TextField 输入配置 #

通过TextEditingController接收用户输入，给用户明确输入格式提示，要求输入两组长度一致的数字序列，用逗号分隔：

final TextEditingController _inputController = TextEditingController();

// 组件使用示例
TextField(
  controller: _inputController,
  decoration: const InputDecoration(
    hintText: '输入格式：P(x)序列,x序列，示例：1,2,3,4,4,3,2,1',
    border: OutlineInputBorder(),
  ),
  keyboardType: TextInputType.numberWithOptions(decimal: true),
)

2. 输入解析与校验 #

拿到输入内容后先做格式清洗、拆分和合法性校验：

void handleInput() {
  // 去除所有空格后按逗号拆分
  final input = _inputController.text.replaceAll(' ', '');
  final List<String> inputSegments = input.split(',');
  // 校验两组序列长度一致
  if (inputSegments.length % 2 != 0) {
    // 自行添加错误提示逻辑，比如弹窗、toast
    return;
  }
  final int halfLen = inputSegments.length ~/ 2;
  List<double> pList = [];
  List<double> xList = [];
  try {
    pList = inputSegments.sublist(0, halfLen).map((e) => double.parse(e)).toList();
    xList = inputSegments.sublist(halfLen).map((e) => double.parse(e)).toList();
  } catch (e) {
    // 捕获非数字输入异常，添加错误提示
    return;
  }
  calculateData(pList, xList);
}

3. 统计计算逻辑 #

按照要求计算三个统计值，同时生成每行的乘法结果：

// 存储每行结果的实体类，可按需替换为Map
class CalcRow {
  final double pVal;
  final double xVal;
  final double multiplyVal;
  CalcRow(this.pVal, this.xVal, this.multiplyVal);
}

// 统计计算方法
List<dynamic> calculateData(List<double> pList, List<double> xList) {
  double sumP = 0;
  double sumX = 0;
  double sumMultiply = 0;
  List<CalcRow> rowList = [];
  for (int i = 0; i < pList.length; i++) {
    final p = pList[i];
    final x = xList[i];
    final multiply = p * x;
    rowList.add(CalcRow(p, x, multiply));
    sumP += p;
    sumX += x;
    sumMultiply += multiply;
  }
  return [rowList, sumP, sumX, sumMultiply];
}

4. 结果表格渲染 #

用Flutter内置的DataTable组件渲染结果，自带表格样式，适配要求的输出格式：

// 拿到计算结果后构建表格
DataTable buildResultTable(List<CalcRow> rows, double sumP, double sumX, double sumMultiply) {
  return DataTable(
    columns: const [
      DataColumn(label: Text('P(x)')),
      DataColumn(label: Text('x')),
      DataColumn(label: Text('P(x)*x')),
    ],
    rows: [
      // 渲染每行数据
      ...rows.map((row) => DataRow(cells: [
        DataCell(Text(row.pVal.toStringAsFixed(2))),
        DataCell(Text(row.xVal.toStringAsFixed(2))),
        DataCell(Text(row.multiplyVal.toStringAsFixed(2))),
      ])),
      // 合计行
      DataRow(cells: [
        DataCell(Text('总和：${sumP.toStringAsFixed(2)}', style: const TextStyle(fontWeight: FontWeight.bold))),
        DataCell(Text(sumX.toStringAsFixed(2), style: const TextStyle(fontWeight: FontWeight.bold))),
        DataCell(Text(sumMultiply.toStringAsFixed(2), style: const TextStyle(fontWeight: FontWeight.bold))),
      ])
    ],
  );
}

注意：可以根据业务需求调整数值保留的小数位数，也可以添加输入实时校验逻辑，在用户输入过程中就提示格式错误，提升使用体验。

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