Flutter：扩展vs灵活

Question

我同时使用了Expanded和Flexible小部件，它们的工作原理似乎相同。我错过的两者之间有什么区别吗？

Answer 1

Expanded仅仅是Flexible

的简写

使用这种扩展方式：

Expanded(
  child: Foo(),
);

严格等同于：

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

---

当您想要一个在某些响应式布局中有用的其他Flexible时，您可能想在Expanded上使用fit。

FlexFit.tight和FlexFit.loose之间的区别在于，松散将使其子级具有最大的大小，同时用力迫使子级填充所有可用空间。

Answer 2

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

Answer 3

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

同时，扩展更改了发送给行和列的子级的约束；它有助于填充那里的可用空间。因此，当您将孩子包装在扩展小部件中时，它将填充空白区域。

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

1. Expanded:

2. Flexible:

Answer 4

扩展了-设置了合适的灵活性

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 5

尽管可以使用参数Fit对其进行更改，但 Flexible 下的

Widget默认为 WRAP_CONTENT 。

扩展下的

小部件为 MATCH_PARENT ，您可以使用 flex 进行更改。

Answer 6

如果您使用Flexible而不是Expanded，则唯一的区别是Flexible使其子元素的宽度等于或小于Flexible本身，而{{ 1}}强制其子元素具有与Expanded完全相同的宽度。但是Expanded和Expanded在调整大小时都忽略了孩子的宽度。

Flexible

注意：这意味着无法按其大小按比例扩展Row(children:[ Flexible( child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))), Flexible( child: Container(color: Colors.green, child: Text(‘Goodbye!’))), ] ) 个孩子。该行要么使用孩子的确切宽度，要么在您使用Row或Expanded时完全忽略它。

Answer 7

Expanded（）无非是

handleSubmit = (e, url) => { const assignURL = url assignURL.select() document.execCommand('copy') // now it is in your clipboard }

但是，Flexible默认使用Flexible (fit: FlexFit.tight) = Expanded()。

FlexFit.tight =希望与父级紧密配合，并占用尽可能多的空间。

FlexFit.loose =希望松散地放入父级中，为其自身占用尽可能少的空间。