【问题标题】:how to add TextEditingController and obtain text value from dynamic TextFormField in Flutter?如何在 Flutter 中添加 TextEditingController 并从动态 TextFormField 中获取文本值?
【发布时间】: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得到了上述解决方案

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

请帮帮我 提前感谢

【问题讨论】:

    标签: flutter dart flutter-layout


    【解决方案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() =&gt; _children.removeAt(_count); 的文本字段,但它对我不起作用,请帮助我
    • 使用 _children = List.from(_children)..removeAt(index);,或者没有索引,使用 ..removeLast() .
    猜你喜欢
    • 2021-03-04
    • 2020-08-15
    • 2021-10-05
    • 2021-04-02
    • 1970-01-01
    • 1970-01-01
    • 2021-03-08
    • 1970-01-01
    • 2019-10-06
    相关资源
    最近更新 更多