Question

我是新手，我一直在努力不更新UI上的子代小部件的问题。经过一些尝试，我发现在将新元素添加到list之后，将list作为小部件的子级传递是无效的。但是使用list.map((widget) {return widget;}).toList();可以完美地工作，并且在添加新子项之后UI将会更新

简单的例子：

工作：

class _SomeWidgetState extends State<SomeWidget> {

  List<Widget> _buttons = new List();

  @override
  Widget build(BuildContext context) {
    return GridView.count(
        crossAxisCount: 4,
        children: _buttons.map((widget) {
          return widget;
        }).toList());
  }
  
  void _addChild(){
    setState(() {
      _buttons.add(new SomeWidgetChild(key: UniqueKey()));
    });
  }

  //some code...
}

不起作用：

class _SomeWidgetState extends State<SomeWidget> {

  List<Widget> _buttons = new List();

  @override
  Widget build(BuildContext context) {
    return GridView.count(
        crossAxisCount: 4,
        children: _buttons
    );
  }
  
  void _addChild(){
    setState(() {
      _buttons.add(new SomeWidgetChild(key: UniqueKey()));
    });
  }

  //some code...
}

我想问为什么在这种情况下简单的传递列表不起作用？

Answer 1

据我对pskink comment的理解，仅当子列表与以前不同时才重新构建GridView。因此，传递对 _buttons 的引用将不起作用，因为我一直将相同的引用传递给仅具有不同内容的列表。

Answer 2

您只是缺少_buttons.toList（）;

return GridView.count(
   crossAxisCount: 4, 
   children: _buttons.toList() /// this is the thing you are missing....
);

查看在此DartPad ListOfWidgetBuild 上运行的完整代码

如有任何错误，请随时发表评论。...

Answer 3

第一个代码将小部件返回给children属性，而第二个代码则没有。您的第二个代码应返回小部件以更新UI。

为什么在将列表作为小部件传递时会颤动，为什么子列表不会更新UI，但是list.map（）在添加新的子列表时更新

3 个答案: