在 Flutter 中使用 TextFormField 添加项目列表答案

【问题标题】：Adding list of items using TextFormField in Flutter在 Flutter 中使用 TextFormField 添加项目列表
【发布时间】：2021-02-05 09:31:20
【问题描述】：

我正在尝试实现添加电子邮件列表输入但用户的功能。这就是我目前所拥有的

  List<String> _notificationEmails =[];
  var _notificationEmailsController = TextEditingController();
  Widget _buildNotificationEmailsInput() {
    return TextFormField(
      controller: _notificationEmailsController,
      style: inputTextStyle,
      maxLines: null,
      validator: (String value) {
        print(value);
        if (value.isEmpty) {
          return 'Emails Required';
        }
        return null;
      },
      onChanged: (String value){
        if(value.substring(value.length-1)==','){
          print('here');
            setState(() {
              _notificationEmails.add(value.substring(0,value.length-1));
            });
          _notificationEmailsController.clear();
        }
        print(_notificationEmails);
      },
    );
  }

我的预期结果是，当用户输入电子邮件然后在其后添加逗号时，电子邮件将附加到列表中并且输入字段被清除但我得到导致 this _notificationEmails.add(value.substring(0,value.length-1)); 运行到无穷大的操作循环.

这里是日志

[   +3 ms] flutter: [je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gmail.com, je@gm<…>

这种情况一直持续下去。我做错了什么？

更新

如果它有帮助，我已经意识到这个问题是因为每次调用 _notificationEmailsController.clear(); 时，它都会触发 onChange() 从而循环。

【问题讨论】：

尝试在setState 之前调用clear。我认为 onChange 是由于 setState 而被调用的。
@danypata 问题依然存在。
你必须在这里做两件事。首先检查电子邮件是否有效，您可以使用正则表达式进行检查，然后检查电子邮件是否已存在于列表中，然后继续添加它
@DannyRufus 验证不是我的问题
@Bright 我更新了我的答案，只使用TextEditingController 的相同实例。

标签： flutter controller textformfield

【解决方案1】：

更新：请在Future.delayed 中调用TextEditingController.clear。因为根据clear的描述...

这个方法应该只在帧之间调用，例如作为回应用户操作，而不是在构建、布局或绘制阶段。

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyApp createState() => _MyApp();
}

class _MyApp extends State<MyApp> {
  final List<String> _notificationEmails = <String>[];
  final TextEditingController _controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            _buildNotificationEmailsInput(),
            Expanded(
              child: ListView.builder(
                itemCount: _notificationEmails.length,
                itemBuilder: (_, int idx) => ListTile(
                  title: Text(_notificationEmails[idx]),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  Widget _buildNotificationEmailsInput() {
    return TextFormField(
      controller: _controller,
      validator: (String value) {
        print('VALIDATOR: $value');
        if (value.isEmpty) {
          return 'Emails Required';
        }
        return null;
      },
      onChanged: (String value) {
        if (value.substring(value.length - 1) == ',') {
          print('>>>>>> value = $value : controller = ${_controller.hashCode}');
          setState(() {
            _notificationEmails.add(value.substring(0, value.length - 1));
          });
          Future<void>.delayed(
            const Duration(milliseconds: 10),
            _controller.clear,
          );
          print(_notificationEmails);
        }
      },
    );
  }
}

【讨论】：

【解决方案2】：

**You have to add a list of *TextEditingController* and need to add the contoller text to that list and parse it as you need.**     
     
      List<String> selection = [];  
     List<Product> productList = []; 

     //---------Adding contoller to list   
      
     productProvider.getAll(user.guid).forEach((element) {//---List<Product>
     final TextEditingController quantityController = 
     TextEditingController(text: element.quantity);
     quantityControllers.add(quantityController);
     });

       //-------Adding list of products to list
      List<Map<String, dynamic>> productItems = [];
       List<Product> productOriginalList = 
       productProvider.getAll(user.guid);
       for (int i = 0; i < productOriginalList.length; i++) {
       final Product product = productOriginalList[i];
       if (selection.contains(product.equipmentId)) {
                   
       productItems.add(product.toJson(quantityControllers[i].text));
                  }

     /* Map<String, dynamic> toJson(String quan) => {
    'ProductId': id,
    'Quantity': quan,
     };     
    TextField(
    controller: quantityControllers[index],*/

【讨论】：