Question

我正在尝试在Stack上渲染小部件，并且有enum，并且在这种状态下，我想渲染除此类背景图像以外的其他小部件。。

Stack现在看起来像这样

new Stack(
    children: <Widget>[
      new Image.network(
        'https://images.unsplash.com/photo-1536226078409-fb25e1ed23b9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=51ea5572bb7bbdf19e616f3550fccd9d&auto=format&fit=crop&w=500&q=60',
         fit: BoxFit.cover,
         height: MediaQuery.of(context).size.height,
         width: MediaQuery.of(context).size.width,
      ),
      // render widgets here.
    ],
  ),

然后我要基于enum状态进行渲染。因此，代码将像这样。

 List<Widget> listOfWidget() {
    return [];
  }

 new Stack(
        children: <Widget>[
          new Image.network(
            'https://images.unsplash.com/photo-1536226078409-fb25e1ed23b9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=51ea5572bb7bbdf19e616f3550fccd9d&auto=format&fit=crop&w=500&q=60',
             fit: BoxFit.cover,
             height: MediaQuery.of(context).size.height,
             width: MediaQuery.of(context).size.width,
          ),
          listOfWidget(),
        ],
      ),

但是错误提示

不能将元素类型“列表”分配给列表类型“小部件”。

我完全了解发生了什么，但我不知道如何解决。我该如何重构？

Answer 1

children中的Stack属性是List<Widget>。

您给它一个值[Widget, List<Widget>]，它是一个包含异构元素的列表（第一个是Widget，第二个元素是List）。因此，您给定的值不是List<Widget>，而是必要的List<dynamic>。 List<dynamic>中的第二个元素是List<Widget>，需要将其分配给不可能的Widget，因此会出错。

您可以执行以下操作：

List<Widget> listOfWidget() {
    return [];
}

new Stack(
    children: <Widget>[
        [new Image.network(
        'https://images.unsplash.com/photo-1536226078409-fb25e1ed23b9?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=51ea5572bb7bbdf19e616f3550fccd9d&auto=format&fit=crop&w=500&q=60',
            fit: BoxFit.cover,
            height: MediaQuery.of(context).size.height,
            width: MediaQuery.of(context).size.width,
        )],
        listOfWidget(),
    ].expand((list) => list).toList();,
),

请注意，您也将原始图像也放入列表中。因此，基本上，这将使您的列表变平，以创建最终的List<Widget>。

颤抖如何重构小部件列表

1 个答案: