颤振：小部件的值​删除项目时，不会更新ListView中的内容

你好，我是颤振新手，我在一个名为split row的小部件中工作，我使用一个ListView和三个孩子：文本小部件、ListView生成器小部件和容器小部件

我使用文本作为标题，使用映射填充ListView构建器，使用容器将小部件添加到ListView构建器，一切正常，但当我删除一个项目时，该项目也从映射中删除，从ListView构建器中删除，但不更新值

为了更好地解释我自己，我用一个textField和一个文本做了一个例子，在第一个例子中，我输入了三次map键的值，在第二个例子中，文本由单词data和map键组成。事情就是这样

如您所见，当我删除数据1时，该项将消失，只留下数据0、数据2和数据3，但值111保留，值333消失。明显的价值观​​除000=>0数据外，不对应于映射元素

我已经在论坛上搜索过，在网站上搜索过stackoverflow，但我没有找到任何对我有帮助的东西

代码如下：

import 'package:flutter/material.dart';

class SplitRow extends StatefulWidget {
  @override
  _SplitRowState createState() => _SplitRowState();
}

class _SplitRowState extends State<SplitRow> {
  int _index = 0;
  Map<String, Widget> splitRows = {};
  Map records = {};
  Map col1 = {};

  // Crete Widget Split Row
  Widget _splitRow(index) {
    return Column(
      children: <Widget>[
        Container(
          color: Colors.white,
          height: 40.0,
          child: Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.remove_circle),
                iconSize: 24,
                color: Color(0xFFFF3B30),
                onPressed: () {
                  removeItem(index);
                },
              ),
              Container(
                width: 100,
                child: TextField(
                  keyboardType: TextInputType.numberWithOptions(
                    signed: false,
                    decimal: true,
                  ),
                  decoration: InputDecoration(
                    hintText: 'Put direction here...',
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontFamily: 'Lekton'),
                  onChanged: (value) {
                    col1["$index"] = value;
                  },
                ),
              ),
              _VerticalDivider(),
              Text('data $index'),
            ],
          ),
        ),
        _HorizontalDivider(),
      ],
    );
  }

  // Create Widget Add Row
  Widget _addRow() {
    return Container(
      height: 40,
      color: Colors.white,
      child: Row(
        children: <Widget>[
          Container(
            height: 40,
            color: Colors.white,
            child: IconButton(
              icon: Icon(Icons.add_circle),
              iconSize: 24,
              color: Color(0xFF34C759),
              onPressed: () {
                addItem();
              },
            ),
          ),
          Text('New Item')
        ],
      ),
    );
  }

  // Add splitRow
  void addItem() {
    int key = _index;
    print('Index antes $_index');
    setState(() {
      splitRows['$key'] = _splitRow(key);
      ++_index;
    });
    print(splitRows);
  }

  // Remove splitRow
  void removeItem(key) {
    setState(() {
      splitRows.remove('$key');
      col1.remove('$key');
    });
  }

  // Save Values
  void saveItems() {
    records = {'qty': col1};
    print(records);
  }

  @override
  void initState() {
    super.initState();
    splitRows['$_index'] = _splitRow(_index);
    ++_index;
    // splitRows['$_index'] = _addRow(_index);
    // ++_index;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Directions'),
          actions: <Widget>[
            FlatButton(
              child: Text(
                'Save',
                style: TextStyle(color: Colors.white),
              ),
              onPressed: () {
                saveItems();
              },
            )
          ],
        ),
        backgroundColor: Color(0xFFE5E5EA),
        body: Column(
          children: <Widget>[
            Container(
                constraints: BoxConstraints(
                  minHeight: 40.0,
                  maxHeight: 500.0,
                  minWidth: double.infinity,
                  maxWidth: double.infinity,
                ),
                child: ListView(
                  children: <Widget>[
                    Padding(padding: EdgeInsets.only(top: 10.0)),
                    Text('DIRECTIONS'),
                    ListView.builder(
                      shrinkWrap: true,
                      itemCount: splitRows.length,
                      itemBuilder: (BuildContext context, int index) {
                        String key = splitRows.keys.elementAt(index);
                        return splitRows[key];
                      },
                      physics: NeverScrollableScrollPhysics(),
                    ),
                    _addRow()
                  ],
                ))
          ],
        ));
  }
}

class _HorizontalDivider extends StatelessWidget {
  const _HorizontalDivider({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Divider(
        height: 2.0,
      ),
    );
  }
}

class _VerticalDivider extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 20,
      width: 2,
      margin: EdgeInsets.symmetric(horizontal: 5.0, vertical: 5.0),
      child: VerticalDivider(
        width: 2.0,
      ),
    );
  }
}

---

我将永远感谢您能给我的任何帮助或建议，我已经很久没有解决方案了

ListView.builder创建一个要显示的小部件列表，当您删除一个小部件并更新状态ListView.builder时，只需重新运行小部件来构建，并查看文本字段已经存在，比较这些元素，看起来它们是同一类型的小部件，所以它不会改变任何东西，而且Textfield也不会保存任何已保存的状态，所以即使要重建它，也只会返回“此处放置方向…”。即使您认为您在一个地图中保存了一个小部件的状态，但它不会改变任何东西，要构建的小部件也会被保存，但没有状态。您可以添加一个键以使它们看起来不同，或者向TextField添加一个Textcontroller。它不会保存状态，但您可以向其中添加一个初始文本值

class MySplitRow extends StatelessWidget{
  final Map col1;
  final String index;
  final VoidCallback onPressed;

  MySplitRow({this.col1, this.index, this.onPressed, Key key}) : super(key: key);


  @override
  Widget build(BuildContext context){
    return Column(
      children: <Widget>[
        Container(
          color: Colors.white,
          height: 40.0,
          child: Row(
            children: <Widget>[
              IconButton(
                icon: Icon(Icons.remove_circle),
                iconSize: 24,
                color: Color(0xFFFF3B30),
                onPressed: onPressed,
              ),
              Container(
                width: 100,
                child: TextField(
                  controller: TextEditingController(text: col1["$index"]), //it will check the map col1 and if its not null it will give you the value that was saved at that key
                  keyboardType: TextInputType.numberWithOptions(
                    signed: false,
                    decimal: true,
                  ),
                  decoration: InputDecoration(
                    hintText: 'Put direction here...',
                    border: InputBorder.none,
                  ),
                  style: TextStyle(fontFamily: 'Lekton'),
                  onChanged: (value) {
                    col1["$index"] = value;
                  },
                ),
              ),
              const VerticalDivider(width: 10, endIndent: 10, indent: 10), //Works exactly as _VerticalDivider with less code
              Text('data $index')
            ],
          ),
        ),
        const Divider(color: Colors.white, height: 2) //Works exactly as _HorizontalDivider with less code
      ],
    );
  }
}

和内部Listview.builder

 (BuildContext context, int index) {
  String key = splitRows.keys.elementAt(index);
  return MySplitRow(
     key: ValueKey<String>(key),
     col1: col1,
     index: key,
     onPressed: () => removeItem(key),
  );
}

---

有几点建议，您更喜欢使用类而不是方法来构建小部件。您的_水平分隔符和_垂直分隔符可以在不将分隔符包装到容器中的情况下构建

而不是返回splitRows[key]；您应该返回一个新创建的小部件，因此不要在splitRows映射中存储小部件，而是只存储数据并在builderHanks@pskink中按需创建小部件。您的意思是这样的：return\u splitRowkey？对不起，我是新来的。感谢againi意味着你不应该在地图中缓存任何小部件，相反，你应该只保留你的数据，并在builder中按需构建小部件-如下所示：你有items变量，保持数据在线Perfect，我将开始工作，感谢你的帮助，除了帮助我解决问题之外，他给我留下了更多的知识