Flutter：如何以编程方式添加TextField或TextFormField

Question

Flutter：如何以编程方式添加TextField或TextFormField

9

我已经创建了一个带有表单键和表单数据变量的表单，例如Map<String, String> _formdata = {}; formdata包含配置文件数据等字段。
其中有一个字段称为Pets，它有两个字段名称和年龄。
我想添加一个按钮，允许用户添加更多的宠物。这个表格只有在点击按钮时才会显示。用户可以通过单击此按钮添加多个宠物。

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时，我只得到了最后一个值。

{pet6: 5, name6: 5}

- CodeforCore

如果可能的话，您能否添加完整的代码？ - Mangaldeep Pannu

好的，我已经添加了完整的代码。 - CodeforCore

2个回答

5

由于您没有分享任何代码，我将为您提供一个想法，告诉您如何实现它。这是完整的代码。

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() {
  _children = List.from(_children)
    ..add(TextFormField(
      decoration: InputDecoration(hintText: "This is TextField ${_count}"),
    ));
  setState(() => ++_count);
}

- CopsOnRoad

@CopsOnRoad 我怎样从文本框中获取数据？ - griffins

3

你可以将controller赋值为一个TextEditingController对象，然后使用类似_children[0].controller.text的语句来获取文本的值。 - CopsOnRoad

@CopsOnRoad 如果我们想从这个列表中删除一些项目怎么办？我可以使用 List.of(_data)..removeAt(position) 更新列表并删除特定位置的项目。但是，如果我们将其删除，我们的 Map<> 数据项会发生什么？我无法实现这一点。 - Purvik Rana

@PurvikRana，你能指导我如何在Flutter-Bloc状态管理中实现这个吗？ - Aravinthan Subramanian

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- CopsOnRoad · Accepted Answer

如果它能正常工作，请告诉我。

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,
      ),
    );
  }
}