展开的小部件必须放在 Flex 小部件内

Posted 2023-02-23

【中文标题】展开的小部件必须放在 Flex 小部件内

【英文标题】：Expanded widgets must be placed inside Flex widgets

【发布时间】：2018-10-19 10:03:52

【问题描述】：

刚接触flutter，有人能告诉我下面的代码有什么问题吗

  class GamePage extends StatelessWidget 
  int _row;
  int _column;

  GamePage(this._row,this._column);

  @override
  Widget build(BuildContext context) 
    return new Material(
      color: Colors.deepPurpleAccent,
      child:new Expanded(
          child:new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) 
        return new Center(
            child: new CellWidget()
        );
      ),) )


    );
  

附加错误截图。

【参考方案1】：

您没有Flex 祖先。

Expanded 小部件必须是 Row、Column 或 Flex 的后代，并且从 Expanded 小部件到其封闭的 Row、Column 或 Flex 的路径必须仅包含 StatelessWidget 或 StatefulWidget（而不是其他类型的小部件，如 RenderObjectWidget )。

我不确定您是否需要 Expanded。但是删除它或将其包装在 Column 中应该可以解决问题。

【参考方案2】：

崩溃

这会崩溃，因为 Expanded 不是 Flex 小部件的后代：

Container(
  child: Expanded(
    child: MyWidget(),
  ),
)

可以接受

Here Expanded 是 Flex的后代：

Flex(
  direction: Axis.horizontal,
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

Row 也是一个 Flex 小部件：

Row(
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

列也是如此：

Column(
  children: [
    Expanded(
      child: MyWidget(),
    ),
  ],
)

另一种选择是去掉 Expanded 小部件：

Container(
  child: MyWidget(),
)

【讨论】：

哪些是扩展小部件？我的 Flexible with flex:1 下方看不到 Expanded 。灵活 fit: BoxFit.scaledown 的 AssetImage 的装饰图像。我在本地收到错误，但在浏览器和移动设备上显示正常，但在 firebase 上不显示。

我有一个SafeArea <- Expanded 取出Expanded 并且错误消失了。

【参考方案3】：

使用Expanded 小部件使Row、Column 或Flex 的子级扩展以填充沿主轴的可用空间（例如，水平方向用于Row 或垂直方向用于@ 987654326@)。如果展开多个子节点，则根据flex 因子在它们之间分配可用空间。

所以要解决上述问题，您只需将 Expanded 小部件包装在 flex 小部件中，如下所示：

 @override
 Widget build(BuildContext context) 
   return new Material(
       color: Colors.deepPurpleAccent,
       child:Column(
         children: <Widget>[
           new Expanded(
               child:new GridView.count(crossAxisCount: _column,children: new List.generate(_row*_column, (index) 
                 return new Center(
                     child: new CellWidget()
                 );
               ),) )
         ],
       )


   );
 

【参考方案4】：

另一个与错误相关但使用 Expanded 和 ConstrainedBox 的简单示例：

代码：

Column(
  children:  [
    ConstrainedBox(
      child: Expanded(
        child: ...
      )
    )
  ]

错误信息：

[...] 通常，这意味着 Expanded 小部件具有错误的祖先 RenderObjectWidget。通常，扩展小部件直接放置在 Flex 小部件中。 有问题的 Expanded 当前放置在 ConstrainedBox 小部件内。

为什么代码不能正常工作？ 在此示例中，Expanded 必须将 Column 作为直接 Parent（这是兼容的父类型）。

解决办法：

Column(
  children:  [
   Expanded(
      child: ConstrainedBox(
        child: ...
      )
    )
  ]