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

我使用的是Ffltter 1.5.4.

我已经在列表中使用了更简单的元素,我试图用这个页面来构建一个新项目,以消除所有可能的问题,但它仍然不能正常工作.

我还try 使用列而不是列表,但结果总是相同的.

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

小装置.投掷:

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个项目,然后删除"Item 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]

这是正确的,因为"Item 1"已从列表中删除,但如果我查看UI,会得到以下结果:

enter image description here

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

我该怎么解决这个问题?是我做错了什么呢,还是这只是一只Flutter 的虫子?

推荐答案

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

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

Why it works?
It causes the whole ListView to rebuild itself from scratch but only when the length on your list changes. What's important is that it doesn't happen in other cases (like typing inside a TextField) because such action would cause you to lose focus on every letter type.

希望它能有所帮助;)

Dart相关问答推荐

Flutter 是否提供即时应用程序?

带有字符串键的 Dart Map,与忽略大小写进行比较

ListView 不会刷新,而附加列表会刷新 (Flutter)

如何在 Flutter 上实现事件监听器或委托

无法在Flutter中为 TabBarView 设置动态高度

Flutter/Dart:子类化冻结的数据类

Flutter 中带有导航栏的永久视图

什么用例有 FirebaseUser 的 reload() 功能?

如何在DartPad中导入库?

使用where在对象列表中搜索 dart 中的特定对象

从real mobile浏览器访问Flatter localhost

Flutter /dart 错误:参数类型'Future'不能分配给参数类型'File'

设置Dart中非常量的默认值

如何在 flutter 中对json进行字符串化

从 HttpClientResponse 检索响应正文

Dart 中 Promise.all 的类比?

dart中是否有类似struct struct 的东西?

如何以 Dart 语言将变量完全转储/打印到控制台?

你如何在 Dart 中创建一个 Stream?

dart列表最小值/最大值