flutter - 从 ListView 中的所有 TextFeild 中获取值

Question

我制作了一个小部件，其中ListView每个项目包含三个 TextField，就像这样。

小部件可以包含联系人拥有的N个地址。当联系人完成输入他们的地址时，我想单击 appBar 中的保存按钮以从每个项目中获取所有输入值ListView并放入 JSON。像这样的东西：

[
  {"Place": "Office", "Street": "Street Name", "PostalCode": "56789"},
  {"Place": "Home", "Street": "Street Home", "PostalCode": "57689"},
  {"Second Home": "Office", "Street": "Street 2th", "PostalCode": "45342"},
]

这是小部件的代码：

class TestPage2 extends StatefulWidget {
  @override
  _TestPage2State createState() => _TestPage2State();
}

class _TestPage2State extends State<TestPage2> {
  List<Widget> lwidgets = [];

  @override
  void initState() {
    lwidgets.insert(
        lwidgets.length,
        _Contacts(
            indice: 0, onDeleteContact: (int i) => {deleteItemFromList(i)}));
    lwidgets.insert(lwidgets.length, _AddElement(() => {addItemToList()}));
    super.initState();
  }

  void addItemToList() {
    setState(() {
      lwidgets.insert(
          lwidgets.length - 1,
          _Contacts(
              indice: lwidgets.length - 1,
              onDeleteContact: (int i) => {deleteItemFromList(i)}));
    });
  }

  void deleteItemFromList(int i) {
    setState(() {
      lwidgets.removeAt(i);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('CONTACTS'),
          leading: Icon(Icons.arrow_left),
          actions: <Widget>[
            FlatButton(
              onPressed:
                  () {}, // I want get all values contained of lwidgets. What do i need to do???
              child: Text(
                'SAVE',
                style: TextStyle(color: Colors.white),
              ),
            )
          ],
        ),
        backgroundColor: Color(0xFFE5E5EA),
        body: Column(
          children: <Widget>[
            Text('ADRESSES'),
            Container(
              height: 200,
              child: ListView.builder(
                itemCount: lwidgets.length,
                itemBuilder: (BuildContext context, int index) {
                  return lwidgets[index];
                },
                physics: NeverScrollableScrollPhysics(),
              ),
            ),
          ],
        ));
  }
}

这是联系信息小部件的代码：

class _Contacts extends StatelessWidget {
  final int indice;
  final Function(int) onDeleteContact;

  const _Contacts({this.indice = 0, this.onDeleteContact});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Container(
          height: 40,
          color: Colors.white,
          child: Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.remove_circle),
                iconSize: 24,
                color: Color(0xFFFF3B30),
                onPressed: () {
                  onDeleteContact(indice);
                },
              ),
              Container(
                width: 100,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Place',
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontFamily: 'Lekton'),
                ),
              ),
              _VerticalDivider(),
              Container(
                width: 100,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Street',
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontFamily: 'Lekton'),
                ),
              ),
              _VerticalDivider(),
              Container(
                width: 100,
                child: TextField(
                  decoration: InputDecoration(
                    hintText: 'Postal Code',
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontFamily: 'Lekton'),
                ),
              ),
            ],
          ),
        ),
        _HorizontalDivider(),
      ],
    );
  }

我将不胜感激任何帮助

标签： flutterflutter-listview