Flutter中如何将TextFormField数据存入列表以生成变量关系图表

你的代码存在两个核心问题：

• 类型不匹配：Acceleration类的spead参数要求是double类型，但你直接传入了TextEditingController实例，这会导致编译错误
• 数据未动态同步：初始化data列表时用的是控制器的初始空值，后续输入框内容变化不会自动更新列表，也没有触发图表的UI刷新

以下是修改后的完整代码，包含两种更新数据的实现方式：

方式1：手动提交更新数据 #

添加按钮触发数据更新，同时修正类型转换和状态刷新逻辑：

class _HomePageState extends State<HomePage> {
  TextEditingController value1 = TextEditingController();
  TextEditingController value2 = TextEditingController();

  List<Acceleration> data = [
    Acceleration('1', 0), // 初始设为合法double值
    Acceleration('2', 0),
    Acceleration('3', 40),
    Acceleration('4', 30),
    Acceleration('5', 20),
    Acceleration('june', 33),
    Acceleration('july', 22),
  ];

  // 更新数据列表的方法
  void updateData() {
    setState(() {
      // 转换输入文本为double，处理空值或非数字情况
      final val1 = double.tryParse(value1.text) ?? 0;
      final val2 = double.tryParse(value2.text) ?? 0;
      // 更新列表对应位置的数据
      data[0] = Acceleration('1', val1);
      data[1] = Acceleration('2', val2);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Line Chart speadTimeRelation"),
        centerTitle: true,
        backgroundColor: Colors.green[700],
      ),
      body: Column(
        children: [
          TextFormField(
            controller: value1,
            keyboardType: TextInputType.numberWithOptions(decimal: true),
            decoration: const InputDecoration(hintText: "输入第一个值"),
          ),
          TextFormField(
            controller: value2,
            keyboardType: TextInputType.numberWithOptions(decimal: true),
            decoration: const InputDecoration(hintText: "输入第二个值"),
          ),
          // 添加提交按钮触发更新
          ElevatedButton(
            onPressed: updateData,
            child: const Text("更新图表数据"),
          ),
          Container(
            padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 20),
            child: SfCartesianChart(
              primaryXAxis: const CategoryAxis(),
              title: const ChartTitle(text: 'speadTimeRelation Analysis'),
              legend: const Legend(isVisible: true),
              tooltipBehavior: TooltipBehavior(enable: true),
              series: <LineSeries<Acceleration, String>>[
                LineSeries<Acceleration, String>(
                  dataSource: data,
                  xValueMapper: (Acceleration speadTimeRelation, _) => speadTimeRelation.time,
                  yValueMapper: (Acceleration speadTimeRelation, _) => speadTimeRelation.spead,
                  name: 'speadTimeRelation',
                  dataLabelSettings: const DataLabelSettings(isVisible: true),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

class Acceleration {
  final String time;
  final double spead;

  Acceleration(this.time, this.spead);
}

方式2：实时监听输入更新 #

如果需要输入内容时实时刷新图表，给控制器添加监听逻辑：

@override
void initState() {
  super.initState();
  // 监听输入框内容变化，实时更新数据
  value1.addListener(updateData);
  value2.addListener(updateData);
}

@override
void dispose() {
  value1.dispose();
  value2.dispose();
  super.dispose();
}

// 复用上面的updateData方法

• 将data列表初始值改为合法的double类型，解决类型不匹配问题
• 新增updateData方法，负责将输入文本转换为double，更新列表并调用setState触发UI刷新
• 给输入框设置数字键盘类型，优化输入体验
• 用double.tryParse配合空值运算符，处理输入非数字的情况，避免程序崩溃

内容的提问来源于stack exchange，提问作者conq1187