如何重构小部件列表

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(),
        ],
      ),

然而错误说

元素类型“List”无法分配给列表类型“Widget”。

我完全理解发生了什么，但我不知道如何解决这个问题。我怎么能重构这个？

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中。所以基本上这将使你的列表变平，以创建一个最终的List<Widget>。