颤振:扩展vs灵活

Expanded只是Flexible的缩写

这样使用Expanded:

Expanded(
child: Foo(),
);

严格等价于:

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

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

FlexFit.tight和FlexFit.loose之间的区别是，loose将允许它的子元素具有最大大小，而tight将强制该子元素填充所有可用空间。

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

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

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

同时，扩大改变了发送给行和列的子对象的约束;它有助于填补那里的可用空间。因此，当您将子组件包装在一个Expanded小部件中时，它会填充空白区域。

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

1. 扩展:

2. 灵活:

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

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

Expanded()只不过是Flexible() with

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

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

FlexFit.tight =想要紧紧地融入父母，占用尽可能多的空间。

FlexFit.loose =想要宽松地融入父母，为自己占用尽可能少的空间。

扩大改变子部件的约束，使其填充任何空白。扩展的小部件是一个专门的灵活的小部件，设置适合-灵活(适合:FlexFit.tight。展开的小部件也有一个flex属性。

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

柔性配合属性包括:

• FlexFit。loose -使用小部件的首选大小。(默认)
• FlexFit。tight -强制小部件填充它的所有额外空间。

灵活的默认将共享父部件的可用空间，但不将强制子部件适应该空间。

扩大将共享父小部件的可用空间，并强制子小部件将其宽度/高度更改为填满可用空间。

事实上，Expanded扩展了Flexible，它是一个带有FlexFit.tight的Flexible。参见官方文件。

下面是一行中的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.')),
),
],
)