Flutter-删除元素时UI未正确更新 [英] Flutter - UI is not updated correctly when removing an element

问题描述

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

I'm trying to build a page in which users can add and remove elements from a list. I'm struggling with a problem. When I remove an element, the model is updated correctly while the UI is updated but in a wrong way: only the last element of the list is removed.

我正在使用Flutter 1.5.4.

I'm using Flutter 1.5.4.

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

I already using simpler elements for the list and I tried to build a new project with only this page to remove all possible problems, but it still doesn't work correctly.

我也尝试使用Column而不是List，但结果始终相同.

I also tried using a Column instead of a List but the result is always the same.

main.dart:

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

widget.dart:

widget.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"，则这是控制台上的输出:

If I add 4 items to the list and then remove "item 1", this is the output on the console:

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，这就是我得到的:

Which is correct, as "item 1" was removed from the list, but if I look at the UI, this is what i get:

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

The number of elements in the list is correct, the model is correct, but the elements shown are wrong.

我该如何解决?我是在做错什么，还是Flutter的错误?

How do I fix this? Am I doing something wrong or is it a bug of Flutter?

推荐答案

删除不更新已删除元素的原因是第二个小部件是有状态小部件，在某些情况下需要强制渲染

The reason for removing not updating the deleted element is the second widget is stateful widget it needs force rendering in some case

使用此代码通过覆盖didUpdateWidget方法来重新加载视图

use this code to get reload the view by overriding the didUpdateWidget method

 @override
  void didUpdateWidget(LoadImageFromPathAsync oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (oldWidget != widget) {
        setState(() {});
    }
  }

这篇关于Flutter-删除元素时UI未正确更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！