Flutter：扩展与灵活

108

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

Expanded和Flexible之间有什么区别？

dart flutter

— Paresh Mangukiya
source

127

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

— 劳夫·拉希切（Raouf Rahiche）
source

6

灵活仅占用所需的空间，而扩展则占用所有可用空间，同时要flex考虑因素。有关更多信息，请参见小部件的文档Expanded。

— Aleksandar

105

Expanded 只是的简写 Flexible

使用扩展方式如下：

Expanded(
  child: Foo(),
);

严格等于：

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

您可能需要使用Flexible过Expanded，当你想要一个不同的fit，在一些敏感的布局非常有用。

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

— 雷米·罗素（RémiRousselet）
source

1

不Maximum size与Available space这里的意思是一回事吗？

— CopsOnRoad

不，由MAXIMUMSIZE我的意思是像具有与灵活的孩子与塔内maxHeight一个ConstrainedBox

— 雷米Rousselet

25

用简单的话来说，Flexible.tight将迫使孩子占用整个可用空间，Flexible.loose并让孩子做自己想做的事情。有些孩子可能会占用整个空间，有些则不会，这取决于他们的类型。

— CopsOnRoad '18 -10-8

43

尽管您可以使用参数Fit更改它，但是默认情况下，Flexible下的窗口小部件为WRAP_CONTENT。

扩展下的小部件为MATCH_PARENT，您可以使用flex对其进行更改。

— 帕尔韦什汗
source

3

对Android开发人员的绝佳解释！

— SwiftiSwift

即使Flexible看起来像WRAP_CONTENT，我们还是在Flexible内部使用Align在可用空间中进行对齐。

— Akshar Patel

19

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

— 安德烈·图尔科夫斯基
source

17

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

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

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

展开：
灵活：

— 一秒
source

1

如果您使用Flexible而不是Expanded，则唯一的区别是，Flexible让其子项的宽度等于或小于其Flexible自身的宽度，同时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或时完全忽略它Flexible。

— Paresh Mangukiya
source

0

Expanded（）无非就是Flexible（）

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

但是，fit :FlexFit.loose默认情况下灵活使用。

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

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

— 亚什
source