Flutter：扩展与灵活答案

【问题标题】：Flutter: Expanded vs FlexibleFlutter：扩展与灵活
【发布时间】：2019-03-09 19:12:02
【问题描述】：

我同时使用了 Expanded 和 Flexible 小部件，它们的工作方式似乎相同。

扩展和灵活有什么区别？

【问题讨论】：

标签： flutter dart flutter-layout flutter-widget

【解决方案1】：

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

【讨论】：

Flexible 只占用所需的空间，而 Expanded 占用所有可用空间，尊重 flex 因素。请参阅the docs of the Expanded widget 了解更多信息。
Flexible 和 Container 都占用了所需的空间。
令我困惑的是，当容器是 Flexible 或 Expanded 的子容器时，行为是相同的。这是因为Containers with no children try to be as big as possiblesource。所以容器让 Flexible 看起来像是它的强迫容器变大，但实际上它是容器真正想要的，灵活的只是让它成为它，而 Expanded 迫使容器变大。

【解决方案2】：

Expanded 只是Flexible 的简写

这样使用Expanded：

Expanded(
  child: Foo(),
);

严格等同于：

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

当您需要不同的fit 时，您可能希望使用Flexible 而不是Expanded，这在某些响应式布局中很有用。

FlexFit.tight 和 FlexFit.loose 之间的区别在于 loose 将允许其子级具有最大大小，而 tight 强制该子级填充所有可用空间。

【讨论】：

Maximum size 和 Available space 在这里的意思不一样吗？
不，我所说的最大尺寸是指作为 Flexible 的子级，在列内具有 maxHeight 的 ConstrainedBox
简单来说，Flexible.tight 将强制孩子们占用整个可用空间，Flexible.loose 将让孩子们为所欲为。有些孩子可能会占据整个空间，有些则不会，这取决于他们的类型。
@CopsOnRoad 表示上面的FlexFit.tight 和FlexFit.loose。

【解决方案3】：

Flexible 下的小部件默认为 WRAP_CONTENT，尽管您可以使用参数 fit 更改它。

Expanded 下的小部件是 MATCH_PARENT，您可以使用 flex 更改它。

【讨论】：

安卓开发者的精彩解释！
尽管 Flexible 看起来像 WRAP_CONTENT，但我们在 Flexible 中使用 Align 来对齐可用空间。

【解决方案4】：

Expanded - 它是 Flexible 设置合适

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

【讨论】：

【解决方案5】：

您可以使用灵活来调整行和列中的小部件的大小。主要用于调整不同子widget的空间，同时保持与父widget的关系。

同时，Expanded 改变了发送给 rows 和 columns 子级的约束；它有助于填补那里的可用空间。因此，当您将孩子包装在 Expanded 小部件中时，它会填满空白空间。

提供这些来自 Flutter 的官方 YouTube 频道的视频只是为了帮助人们，他们可能会在即将到来的未来寻找这个......

Expanded:
Flexible:

【讨论】：

【解决方案6】：

Expanded() 只不过是 Flexible() 与

Flexible (fit: FlexFit.tight) = Expanded()

但是，Flexible 默认使用fit :FlexFit.loose。

FlexFit.tight = 想要尽可能地紧贴父母。

FlexFit.loose = 想要松散地适应父母，尽可能少地占用自己的空间。

【讨论】：

【解决方案7】：

如果您使用Flexible 而不是Expanded，唯一的区别是Flexible 允许其子级具有与Flexible 本身相同或更小的宽度，而Expanded 强制其子级具有精确的宽度Expanded 的宽度相同。但是Expanded 和Flexible 在调整自己大小时都会忽略孩子的宽度。

灵活

Flexible 小部件包装了一个小部件，因此该小部件可以调整大小。当 Flexible 小部件包装一个小部件时，该小部件将成为 Flexible 小部件的子级，并被认为是灵活的。在布局不灵活的小部件后，小部件会根据它们的flex 和fit 属性调整大小。

扩展

Expanded 小部件可以包装小部件并强制小部件填充额外空间。

这里是示例

使用Flexible 调整Row 或Column 中的小部件的大小。这样，您可以调整子小部件的间距，同时保持其相对于其父小部件的大小。 Expanded 改变了子部件的约束，所以它会填充任何空白空间。

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Expanded(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

注意：这意味着不可能将Row 子级按其大小按比例展开。当您使用Expanded 或Flexible 时，Row 要么使用确切的子宽度，要么完全忽略它。

【讨论】：