如何在 Flutter 中添加 TextEditingController 并从动态 TextFormField 中获取文本值？

Posted 2023-02-23

【中文标题】如何在 Flutter 中添加 TextEditingController 并从动态 TextFormField 中获取文本值？

【英文标题】：how to add TextEditingController and obtain text value from dynamic TextFormField in Flutter?

【发布时间】：2020-08-01 23:49:33

【问题描述】：

我想从这些动态 TextFormField 中获取文本值

class MyPets extends StatefulWidget 
  @override
  _MyPetsState createState() => _MyPetsState();


class _MyPetsState extends State<MyPets> 
  List<Widget> _children = [];
  int _count = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Title"),
        actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
      ),
      body: ListView(children: _children),
    );
  

  void _add() 
    TextEditingController controller = TextEditingController();
    controllers.add(controller); //adding the current controller to the list

    for (int i = 0; i < controllers.length; i++) 
      print(
          controllers[i].text); //printing the values to show that it's working
    

    _children = List.from(_children)
      ..add(
        TextFormField(
          controller: controller,
          decoration: InputDecoration(
            hintText: "This is TextField $_count",
            icon: IconButton(icon: Icon(Icons.remove_circle), onPressed: rem),
          ),
        ),
      );
    setState(() => ++_count);
  

  rem() 
    setState(() 
      _children.removeAt(_count);
      controllers.removeAt(_count);
    );
  

  @override
  void dispose() 
    controllers.clear();
    super.dispose();
  

问题是我不知道如何在颤振中将 TextEditingController 传递给这个表单域 我从this stack overflow answer得到了上述解决方案

基本上我想要文本字段，当我点击按钮时，文本字段必须递增 我想要每个文本字段的值，而且我应该能够删除相应的字段

请帮帮我 提前感谢

【参考方案1】：

您可以动态获取所有这些字段的值，将控制器添加到列表中：

class _MyPetsState extends State<MyPets> 
  List<Widget> _children = [];
  List<TextEditingController> controllers = [];  //the controllers list
  int _count = 0;

  @override
  Widget build(BuildContext context) 
    return Scaffold(
      appBar: AppBar(
        title: Text("Title"),
        actions: <Widget>[IconButton(icon: Icon(Icons.add), onPressed: _add)],
      ),
      body: ListView(children: _children),
    );
  

  void _add() 

    TextEditingController controller = TextEditingController();
    controllers.add(controller);      //adding the current controller to the list

    for(int i = 0; i < controllers.length; i++)
      print(controllers[i].text);     //printing the values to show that it's working
    

    _children = List.from(_children)
      ..add(TextFormField(
        controller: controller,
        decoration: InputDecoration(hintText: "This is TextField $_count"),
      ));
    setState(() => ++_count);
  

  @override
  void dispose() 
    controllers.clear();
    super.dispose();
  

【讨论】：

很高兴我能帮上忙！

您可以在 dispose 时清除列表，我已经编辑了我的答案。

如果你想将 ListView 包裹在一个 Column 中，你需要给列表一个固定的高度。你可以用一个容器包装你的 ListView 并设置高度。如果您愿意，我们可以在聊天中继续对话，但在 cmets 中我们不能。

抱歉，最后一件事是我想删除我尝试使用 setState() => _children.removeAt(_count); 的文本字段，但它对我不起作用，请帮助我

使用 _children = List.from(_children)..removeAt(index);，或者没有索引，使用 ..removeLast() .