flutter - 我试图创建将数字作为输入的TextFormFields列表，我想对所有这些数字求和

Question

我试图创建将数字作为输入的TextFormFields列表，我想对所有这些数字求和。当我单击应用程序栏上的按钮时，会出现新的textformfield字段，并且用户输入value..validator也可以正常工作...但是我无法进行求和。当我在Onsaved方法中使用print时，它会显示所有输入的值。如果我使用Controller，无论我们在formfield中输入的文本是什么，它在所有其他textfield中也都显示相同。因此，controller无法正常工作...我创建了TextFormField在不同的函数中，并在按下按钮时调用该函数。我创建了另一个按钮以同时转到下一个屏幕，以验证哪个按钮工作正常……
下面是TextFormField代码:请帮助求和所有在其中输入的值:

      child: TextFormField(
        // controller: _childController,
        decoration: InputDecoration(
            hintText: 'Value $_count',
            border: InputBorder.none,
            contentPadding: EdgeInsets.only(top: 5, left: 20)),
        keyboardType: TextInputType.number,
        style: TextStyle(
          color: Color.fromARGB(255, 0, 0, 0),
          fontWeight: FontWeight.w400,
          fontSize: 24,
        ),
        validator: (String value) {
          double sal = double.tryParse(value);
          if (sal == null) {
            return 'enter or delete row';
          }
        },
        onSaved: (String value) {
          // print(_childController.text);
          // print(value);              
          _mVal = value;
          double _mVal2 = double.tryParse(_mVal);              
          double _mVal3;
          
          print(_mVal);
          int k = 0;
          _children.forEach((element) {
           
            
            int y = int.tryParse(_mVal);
            k=k+y;
            print(k);
          }
          

Answer 1

这是一个如何实现此目的的简单示例:

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Test(),
    ),
  );
}

class Test extends StatefulWidget {
  @override
  _TestState createState() => _TestState();
}

class _TestState extends State<Test> {
  final _formKey = GlobalKey<FormState>();
  List<TextEditingController> textFieldControllers = [];
  int numberOfTextFields = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          addNewTextField();
        },
      ),
      body: Stack(
        children: [
          Form(
            key: _formKey,
            child: ListView.builder(
              itemCount: numberOfTextFields,
              itemBuilder: (BuildContext context, int index) {
                return TextFormField(
                  validator: (String value) {
                    double sal = double.tryParse(value);
                    if (sal == null) {
                      return 'enter or delete row';
                    }
                    return null;
                  },
                  controller: textFieldControllers[index],
                );
              },
            ),
          ),
          Align(
            alignment: Alignment.bottomCenter,
            child: TextButton(
              onPressed: () {
                if (_formKey.currentState.validate()) {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return Center(
                          child: Material(
                            child: Container(
                              padding: EdgeInsets.all(10.0),
                              child: Text(
                                  'The sum is ${textFieldControllers.fold(0, (previousValue, element) => previousValue + int.parse(element.value.text))}'),
                            ),
                          ),
                        );
                      });
                }
              },
              child: Container(
                padding: EdgeInsets.all(10.0),
                color: Colors.redAccent,
                child: Text('Tap to sum'),
              ),
            ),
          ),
        ],
      ),
    );
  }

  void addNewTextField() {
    textFieldControllers.add(TextEditingController());
    numberOfTextFields++;
    setState(() {});
  }

  @override
  void dispose() {
    textFieldControllers.forEach((textFieldController) => textFieldController.dispose());
    super.dispose();
  }
}

您可以根据需要扩展此想法以删除textField。只是不要忘记处理您的textFields。
的工作方式:每次创建TextField小部件时，都会创建一个关联的TextEditingController并将其分配给TextField。当我们想要求和时，我们只需在TextEditingController列表上进行迭代即可。