如何在 flutter 中添加多个文本字段并从中获取值

Question

我正在尝试单击“添加更多”来添加多个textformfileds，并尝试Button访问表单提交上所有字段的值。

我没有获得dynamic添加字段的值。

我按照这个网址dynamically添加textformfields。

这是我的code。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Dynamic TextFormFields',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyForm(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class MyForm extends StatefulWidget {
  @override
  _MyFormState createState() => _MyFormState();
}

class _MyFormState extends State<MyForm> {
  final _formKey = GlobalKey<FormState>();
  TextEditingController _nameController;
  TextEditingController _name1Controller;
  static List<String> friendsList = [null];
  static List<String> friendsList1 = [null];

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController();
    _name1Controller = TextEditingController();
  }

  @override
  void dispose() {
    _nameController.dispose();
    _name1Controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      appBar: AppBar(
        title: Text('Dynamic TextFormFields'),
      ),
      body: Form(
        key: _formKey,
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // name textfield
              Padding(
                padding: const EdgeInsets.only(right: 32.0),
                child: TextFormField(
                  controller: _nameController,
                  decoration: InputDecoration(hintText: 'Enter your name'),
                  validator: (v) {
                    if (v.trim().isEmpty) return 'Please enter something';
                    return null;
                  },
                ),
              ),
              SizedBox(
                height: 20,
              ),
              Text(
                'Add Friends',
                style: TextStyle(fontWeight: FontWeight.w700, fontSize: 16),
              ),
              ..._getFriends(),
              SizedBox(
                height: 40,
              ),
              FlatButton(
                onPressed: () {
                  if (_formKey.currentState.validate()) {
                    _formKey.currentState.save();
                    print(_MyFormState.friendsList);
                    print(_MyFormState.friendsList1);
                  }
                },
                child: Text('Submit'),
                color: Colors.green,
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// get firends text-fields
  List<Widget> _getFriends() {
    List<Widget> friendsTextFields = [];
    for (int i = 0; i < friendsList.length; i++) {
      friendsTextFields.addAll(
        [
          Padding(
            padding: const EdgeInsets.symmetric(vertical: 16.0),
            child: Row(
              children: [
                Expanded(child: FriendTextFields(i)),
                Expanded(child: FriendTextFields1(i)),
                SizedBox(
                  width: 16,
                ),
                // we need add button at last friends row
                _addRemoveButton(i == friendsList.length - 1, i),
              ],
            ),
          )
        ],
      );
    }
    return friendsTextFields;
  }

  /// add / remove button
  Widget _addRemoveButton(bool add, int index) {
    return InkWell(
      onTap: () {
        if (add) {
          // add new text-fields at the top of all friends textfields
          friendsList.insert(0, null);
        } else
          friendsList.removeAt(index);
        setState(() {});
      },
      child: Container(
        width: 30,
        height: 30,
        decoration: BoxDecoration(
          color: (add) ? Colors.green : Colors.red,
          borderRadius: BorderRadius.circular(20),
        ),
        child: Icon(
          (add) ? Icons.add : Icons.remove,
          color: Colors.white,
        ),
      ),
    );
  }
}

class FriendTextFields extends StatefulWidget {
  final int index;
  FriendTextFields(this.index);
  @override
  _FriendTextFieldsState createState() => _FriendTextFieldsState();
}

class _FriendTextFieldsState extends State<FriendTextFields> {
  TextEditingController _nameController;

  @override
  void initState() {
    super.initState();
    _nameController = TextEditingController();
  }

  @override
  void dispose() {
    _nameController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _nameController.text = _MyFormState.friendsList[widget.index] ?? '';
    });

    return TextFormField(
      controller: _nameController,
      onChanged: (v) => _MyFormState.friendsList[widget.index] = v,
      decoration: InputDecoration(hintText: 'textbox 1'),
      validator: (v) {
        if (v.trim().isEmpty) return 'Please enter something';
        return null;
      },
    );
  }
}

//////////////////////////////////////////////////////////////////
class FriendTextFields1 extends StatefulWidget {
  final int index;
  FriendTextFields1(this.index);

  @override
  _FriendTextFields1State createState() => _FriendTextFields1State();
}

class _FriendTextFields1State extends State<FriendTextFields1> {
  TextEditingController _name1Controller;

  @override
  void initState() {
    super.initState();
    _name1Controller = TextEditingController();
  }

  @override
  void dispose() {
    _name1Controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    WidgetsBinding.instance.addPostFrameCallback((timeStamp) {
      _name1Controller.text = _MyFormState.friendsList1[widget.index] ?? '';
    });

    return TextFormField(
      controller: _name1Controller,
      onChanged: (v) => {
        _MyFormState.friendsList1[widget.index] = v,
      },
      decoration: InputDecoration(hintText: 'textbox 2'),
      validator: (v) {
        if (v.trim().isEmpty) return 'Please enter something';
        return null;
      },
    );
  }
}

Answer 1

您可以创建一个list列表，就像您创建的TextEditingController列表一样。TextFields

textField然后，当您向列表中添加新内容时，也controller向列表中添加新内容controllerList。

textfield然后，您可以使用其索引轻松地从任何位置获取数据，list如下所示：

String secondTextFieldText = controllerList[1].text;