Question

我试图熟悉颤动，并且遇到了一些奇怪的情况。我想构建一个动态ListView，其中一个+按钮允许添加元素。我写了以下状态代码：

class MyWidgetListState extends State<MyWidgetList> {
  List<Widget> _objectList = <Widget>[
    new Text('test'),
    new Text('test')
  ];

  void _addOne() {
    setState(() {
      _objectList.add(new Text('test'));
    });
  }

  void _removeOne() {
    setState(() {
      _objectList.removeLast();
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new ListView(
          shrinkWrap: true,
          children: _objectList
        ),
        new Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new IconButton(
              icon: new Icon(Icons.remove_circle),
              iconSize: 36.0,
              tooltip: 'Remove',
              onPressed: _objectList.length > 2 ? _removeOne : null,
            ),
            new IconButton(
              icon: new Icon(Icons.add_circle),
              iconSize: 36.0,
              tooltip: 'Add',
              onPressed: _addOne,
            )
          ],
        ),
        new Text(_objectList.length.toString())
      ],
    );
  }
}

我的问题是ListView在视觉上停留在初始化它的2个元素上。

内部_objectList的管理良好。为了进行测试，我在底部添加了一个简单的Text小部件，该小部件显示了列表的大小。当我单击“添加/删除”按钮并正确刷新时，此选项可以正常工作。我想念什么吗？

Answer 1

Flutter基于不可变数据。这意味着，如果对对象的引用没有更改，则内容也不会更改。

问题是，在您的情况下，您总是将相同的数组发送到ListView，而是更改其内容。但这导致ListView假设列表没有更改，因此可以防止无用的渲染。

您可以更改setState来记住这一点：

setState(() {
  _objectList = List.from(_objectList)
    ..add(Text("foo"));
});

Answer 2

另一种解决方案！

将ListView替换为ListView.builder

代码：

    ListView.builder(
            itemBuilder: (ctx, item) {
              return _objectList[item];
            },
            shrinkWrap: true,
            itemCount: _objectList.length,
          ),

输出：

ListView不会刷新，而附加列表会刷新（Flutter）

2 个答案: