Flutter多数值求和问题：Target3未参与计算，咨询多字段实现方案

问题说明 #

现有Flutter/Dart两数相加代码，已添加第三个输入框但未参与求和，需要扩展为支持20个数相加，询问是否需要使用不同类或语法实现。

解决方案 #

不需要额外的类或特殊语法，通过使用列表统一管理输入控制器和输入框就能高效实现多字段求和，还能避免重复代码。以下是优化后的完整代码：

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    const appTitle = 'Twin City Bowmen Score Sheet';

    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        appBar: AppBar(title: const Text(appTitle)),
        body: const AddMultipleNumbers(),
      ),
    );
  }
}

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

  @override
  State<AddMultipleNumbers> createState() => _AddMultipleNumbersState();
}

class _AddMultipleNumbersState extends State<AddMultipleNumbers> {
  // 初始化20个输入控制器
  final List<TextEditingController> controllers = List.generate(20, (index) => TextEditingController());
  String result = "0";

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16),
      child: Column(
        children: [
          // 动态生成20个输入框行
          for (int i = 0; i < controllers.length; i++)
            Row(
              children: [
                Text("Target ${i + 1}:"),
                const SizedBox(width: 8),
                Flexible(
                  child: TextField(
                    keyboardType: TextInputType.number,
                    controller: controllers[i],
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(),
                    ),
                  ),
                ),
              ],
            ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: () {
              setState(() {
                int sum = 0;
                // 遍历所有控制器求和，空输入默认按0处理
                for (var controller in controllers) {
                  sum += int.tryParse(controller.text) ?? 0;
                }
                result = sum.toString();
              });
            },
            child: const Text("Calculate Total"),
          ),
          const SizedBox(height: 20),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              const Text(
                "Total:",
                style: TextStyle(fontSize: 30),
              ),
              const SizedBox(width: 10),
              Text(
                result,
                style: const TextStyle(fontSize: 30, fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ],
      ),
    );
  }

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

关键优化点 #

• 用List.generate一次性创建20个TextEditingController，无需逐个声明
• 通过循环动态生成20个输入框行，大幅减少重复代码
• 求和时遍历控制器列表，用int.tryParse处理空输入（避免解析报错），空值默认按0计算
• 添加dispose方法销毁所有控制器，防止内存泄漏

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