list - Flutter - 删除元素时 UI 未正确更新

Question

我正在尝试构建一个页面，用户可以在其中添加和删除列表中的元素。我正在努力解决一个问题。当我删除一个元素时，模型会在更新 UI 的同时正确更新，但方式错误:仅删除列表的最后一个元素。

我正在使用 Flutter 1.5.4。

我已经为列表使用了更简单的元素，并且我尝试构建一个仅包含此页面的新项目以消除所有可能的问题，但它仍然无法正常工作。

我也尝试过使用 Column 而不是 List，但结果总是一样。

主 Dart :

import 'package:flutter/material.dart';
import './widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello'),
        ),
        body: Center(
          child: SectionWidget(),
        ),
      ),
    );
  }
}

小部件.dart:

import 'package:flutter/material.dart';

class SectionWidget extends StatefulWidget {
  _SectionWidgetState createState() => new _SectionWidgetState();
}

class _SectionWidgetState extends State<SectionWidget> {
  List<String> _items = List<String>();

  @override
  Widget build(BuildContext context) {
    List<Widget> children = [
      ListTile(
          title: Text(
            "Strings",
            style: TextStyle(fontWeight: FontWeight.bold),
          ),
          trailing: IconButton(
            icon: Icon(Icons.add_circle),
            onPressed: () => setState(() {
                  _items.add('item ${_items.length}');
                  print("Adding "+ _items.last);
                }),
          ),
        ),
    ];

    children.addAll(_buildForms());


    return ListView(
      children: children,
    );
  }

  List<Widget> _buildForms() {
    List<Widget> forms = new List<Widget>();
    print("Strings:" + _items.toString());
    for (String item in _items) {
      forms.add(
        ListTile(
          leading: Icon(Icons.person),
          title: TextFormField(
            initialValue: item,
          ),
          trailing: IconButton(
            icon: Icon(Icons.delete),
            onPressed: () => setState(() {
                  print("Removing $item");
                  _items.remove(item);
                }),
          ),
        ),
      );
    }
    return forms;
  }
}

如果我向列表中添加 4 个项目，然后删除“项目 1”，这是控制台上的输出:

I/flutter ( 4192): Strings:[]
I/flutter ( 4192): Adding item 0
I/flutter ( 4192): Strings:[item 0]
I/flutter ( 4192): Adding item 1
I/flutter ( 4192): Strings:[item 0, item 1]
I/flutter ( 4192): Adding item 2
I/flutter ( 4192): Strings:[item 0, item 1, item 2]
I/flutter ( 4192): Adding item 3
I/flutter ( 4192): Strings:[item 0, item 1, item 2, item 3]
I/flutter ( 4192): Removing item 1
I/flutter ( 4192): Strings:[item 0, item 2, item 3]

这是正确的，因为“项目 1”已从列表中删除，但如果我查看 UI，我会得到以下信息:

列表中的元素数量是正确的，模型是正确的，但是显示的元素是错误的。

我该如何解决这个问题？是我做错了什么还是 Flutter 的错误？

Answer 1

您可以将包含列表中元素长度的 Key 传递给 ListView。

ListView(
  key: Key(myList.length.toString()),
  children: myList.map(...),
),

为什么有效？
它会导致整个 ListView 从头开始​​重建自身，但仅当您的列表长度发生变化时。重要的是它不会在其他情况下发生(例如在 TextField 中键入)，因为这样的操作会导致您失去对每种字母类型的关注。

希望对您有所帮助;)