我用过extended和Flexible小部件,它们的工作原理是一样的。

扩展和灵活之间的区别是什么?


当前回答

Flexible下的Widget默认为WRAP_CONTENT,尽管您可以使用参数匹配来更改它。

Widget下面的扩展是MATCH_PARENT,您可以使用flex更改它。

其他回答

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

Expanded将共享父小部件的可用空间,并强制子小部件更改其宽度/高度以填充可用空间。

事实上,Expanded扩展了Flexible,这是一个带有FlexFit.tight的Flexible。详见官方文件。

这里一行有一个Container小部件和三个Flexible Widgets(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.')),
            ),
          ],
        )

扩展只是灵活的简称

这样使用Expanded:

Expanded(
  child: Foo(),
);

严格等价于:

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

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

FlexFit的区别。紧身和FlexFit。Loose表示Loose将允许其子元素拥有最大大小,而tight则强制其子元素填充所有可用空间。

Flexible下的Widget默认为WRAP_CONTENT,尽管您可以使用参数匹配来更改它。

Widget下面的扩展是MATCH_PARENT,您可以使用flex更改它。

扩展-它是灵活的设置适合

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

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

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

柔性配合属性包括:

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