Flutter：如何计算多个TextField输入值的总和并展示

核心思路是统一管理所有TextEditingController实例，通过遍历控制器列表获取每个TextField的输入值，完成求和后更新界面。

步骤1：在MyHomePage中维护控制器列表 #

在页面的State类里，声明一个List<TextEditingController>来存储每个MyListTile对应的控制器，这样就能随时访问所有输入框的内容。

步骤2：创建MyListTile时绑定控制器 #

生成MyListTile列表时，为每个列表项创建独立的控制器，并添加到全局列表中；同时给TextField绑定对应的控制器。

步骤3：实现求和逻辑 #

遍历控制器列表，将每个输入框的文本转换为数值（注意处理空值或非数字的情况），累加得到总和，通过setState更新界面展示。

修改后的完整代码示例 #

MyHomePage 代码 #

import 'package:flutter/material.dart';

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

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  // 存储所有TextField的控制器
  final List<TextEditingController> _controllers = [];
  double _totalSum = 0.0;

  @override
  void initState() {
    super.initState();
    // 初始化示例数据，创建5个列表项的控制器
    for (int i = 0; i < 5; i++) {
      _controllers.add(TextEditingController());
      // 监听控制器文本变化，实时求和
      _controllers[i].addListener(_calculateTotal);
    }
  }

  @override
  void dispose() {
    // 销毁所有控制器，避免内存泄漏
    for (var controller in _controllers) {
      controller.dispose();
    }
    super.dispose();
  }

  // 计算所有输入值的总和
  void _calculateTotal() {
    double sum = 0.0;
    for (var controller in _controllers) {
      // 处理空值或非数字的情况，默认加0
      final value = double.tryParse(controller.text) ?? 0.0;
      sum += value;
    }
    setState(() {
      _totalSum = sum;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('数值求和示例')),
      body: Column(
        children: [
          // 用toList生成MyListTile列表
          Expanded(
            child: ListView(
              children: List.generate(_controllers.length, (index) {
                return MyListTile(
                  controller: _controllers[index],
                  title: '输入项 ${index + 1}',
                );
              }).toList(),
            ),
          ),
          // 展示总和
          Padding(
            padding: const EdgeInsets.all(16.0),
            child: Text(
              '总和: ${_totalSum.toStringAsFixed(2)}',
              style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
          ),
        ],
      ),
    );
  }
}

MyListTile 代码 #

class MyListTile extends StatelessWidget {
  final TextEditingController controller;
  final String title;

  const MyListTile({super.key, required this.controller, required this.title});

  @override
  Widget build(BuildContext context) {
    return ListTile(
      title: Text(title),
      trailing: SizedBox(
        width: 100,
        child: TextField(
          controller: controller,
          keyboardType: const TextInputType.numberWithOptions(decimal: true),
          decoration: const InputDecoration(
            border: OutlineInputBorder(),
            hintText: '输入数值',
          ),
        ),
      ),
    );
  }
}

关键说明 #

• 控制器监听：通过给每个控制器添加addListener，实现输入文本变化时自动求和，无需手动点击按钮触发。
• 内存管理：在页面销毁时遍历销毁所有控制器，避免内存泄漏。
• 异常处理：用double.tryParse处理空输入或非数字内容，防止程序崩溃。

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