Flutter：如何以编程方式添加TextField或TextFormField [英] Flutter: How to add a TextField or TextFormField programmatically

问题描述

我已经使用formkey创建了一个表单，并且表单数据变量为 Map< String，String> _formdata = {};
formdata包含诸如个人资料数据之类的字段。
其中有一个字段是Pets，其中有两个字段name和age。

我想添加一个按钮，允许用户添加更多宠物。仅当单击按钮时，此表单才应该可见。用户可以通过单击此按钮来添加多个宠物。

I have created a form in with formkey and and form data variable as Map<String, String> _formdata = {}; formdata contains field such as profile data.
Among those there is a field say Pets, It has two fields name and age.
I want to add a button that will allow user to add more pets. This form should be visible only when clicking the button. User can add multiple pets by clicking this button.

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

class _MyPetsState extends State<MyPets> {
  Map<String, String> _formdata = {};
  var _myPets = List<Widget>();
  int _index = 1;

  void _add() {
    _myPets = List.from(_myPets)
      ..add(Column(
        children: <Widget>[
          ListTile(
            leading: Text('Pet $_index : '),
            title: TextField(
              onChanged: (val) => _formdata['pet$_index'] = val,
            ),
          ),
          ListTile(
            leading: Text('Name of Pet $_index : '),
            title: TextField(
              onChanged: (val) {
                _formdata['name$_index'] = val;

              },
            ),
          ),
        ],
      ));

    setState(() => ++_index);
  }
@override
  void initState() {
    // TODO: implement initState
    super.initState();
    _add();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: ()=>print(_formdata),
        child: Text('Save'),
      ),
      appBar: AppBar(
        title: Text('Add your pets'),
        actions: <Widget>[
          FlatButton(
            child: Text('Add another'),
            onPressed: _add,
          ),
        ],
      ),
      body: ListView(
        children: _myPets,
      ),
    );
  }
}

问题是当我打印_formdata时，我只是

The problem is when I print _formdata, I am only getting last value.

{pet6：5，name6：5}

{pet6: 5, name6: 5}

推荐答案

让我知道它是否有效。

Let me know if it works.

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

class _MyPetsState extends State<MyPets> {
  Map<String, String> _formdata = {};
  var _myPets = List<Widget>();
  int _index = 1;

  void _add() {
    int keyValue = _index;
    _myPets = List.from(_myPets)
      ..add(Column(
        key: Key("${keyValue}"),
        children: <Widget>[
          ListTile(
            leading: Text('Pet $_index : '),
            title: TextField(
              onChanged: (val) => _formdata['pet${keyValue - 1}'] = val,
            ),
          ),
          ListTile(
            leading: Text('Name of Pet $_index : '),
            title: TextField(
              onChanged: (val) {
                _formdata['name${keyValue - 1}'] = val;
              },
            ),
          ),
        ],
      ));

    setState(() => ++_index);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _add();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      floatingActionButton: FloatingActionButton(
        onPressed: () => print(_formdata),
        child: Text('Save'),
      ),
      appBar: AppBar(
        title: Text('Add your pets'),
        actions: <Widget>[
          FlatButton(
            child: Text('Add another'),
            onPressed: _add,
          ),
        ],
      ),
      body: ListView(
        children: _myPets,
      ),
    );
  }
}

这篇关于Flutter：如何以编程方式添加TextField或TextFormField的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！