Flutter：扩展与灵活

Question

我用过 Expanded 和 Flexible 小部件，它们的工作原理似乎相同。

Expanded 和 Flexible 有什么区别？

Answer 1

Expanded 只是 shorthand 对于 Flexible

这样使用Expanded：

Expanded(
  child: Foo(),
);

严格等同于：

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

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

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

Answer 2

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
    );
}

Answer 3

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

Answer 4

您可以使用 Flexible 来调整行和列中的小部件的大小。它主要用于调整不同 child 小部件的 space，同时保持与它们的 parent 小部件的关系。

同时，Expanded 更改发送到行和列children的约束;它有助于在那里填充可用的 spaces。因此，当您将 child 包装在扩展小部件中时，它会填充空的 space。

从 Flutter 的官方 YouTube 频道 提供这些视频只是为了帮助人们，他们可能会在不久的将来寻找这些视频...

Expanded:
Flexible:

Answer 5

Flexible 下的小部件默认为 WRAP_CONTENT，但您可以使用参数 fit.

更改它

Expanded 下的小部件是 MATCH_PARENT 您可以使用 flex.

更改它

Answer 6

Expanded() 只不过是 Flexible() 和

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

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

FlexFit.tight = 想融入 parent 尽可能多 space。

FlexFit.loose = 想融入 parent 尽可能少地占用 space。

Answer 7

Expanded 更改子窗口小部件的约束，以便它填充任何空 space。 Expanded widget 是一个专门的 Flexible widget，具有一组 fit - Flexible(fit: FlexFit.tight。Expanded widgets 也有一个 flex 属性.

Flexible 使子窗口小部件灵活且可调整大小。您可以添加 flex 或 fit 属性来调整大小和间距。

灵活配合属性包括：

FlexFit.loose - 使用小部件的首选大小。（默认）
FlexFit.tight - 强制小部件填充其所有额外的 space.

Answer 8

Flexible 默认将共享可用的 space 父部件，但 NOT 强制子部件适应space.

Expanded 将共享父控件可用的 space，并强制子控件将其 width/height 更改为 填充可用 space.

实际上，Expanded 扩展了 Flexible，它是 Flexible 和 FlexFit.tight。见 official document.

这是一个 Container 小部件和三个连续的 Flexible 小部件（flex = 1, fit = FlexFit.loose）。我们可以看到三个灵活的小部件共享相同的 maxWidth（可用屏幕宽度的 1/3），蓝色的要比它大，其他的要小。但正如我们所见，蓝色小部件的宽度为 maxWidth，而其他小部件的宽度恰好适合其内容。

上图代码如下：

        Row(
          mainAxisSize: MainAxisSize.max,
          children: [
            Container(
                color: Colors.teal,
                child: Text(
                  'Container Text ',
                )),
            Flexible(
              child: Container(
                  color: Colors.blue,
                  child: Text(' Text.Flexible Text.Flexible Text.Flexible.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.yellow, child: Text('Flexible Text.')),
            ),
            Flexible(
              child: Container(
                  color: Colors.lightGreen, child: Text('Flexible.')),
            ),
          ],
        )

Flutter：扩展与灵活

Flutter: Expanded vs Flexible

dart

flutter

flutter-layout

flutter-widget