flutter - Flutter：扩展与灵活

Question

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

扩展和灵活之间有什么区别？

Answer 1

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

Answer 2

Expanded只是一个简写Flexible

使用Expanded这种方式：

Expanded(
  child: Foo(),
);

严格等价于：

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

---

当你想要一个不同的，在某些响应式布局中有用的时候，你可能想要使用Flexibleover 。Expandedfit

和之间的区别在于FlexFit.tight，FlexFit.loose这loose将允许其子级具有最大尺寸，同时tight强制该子级填充所有可用空间。

Answer 3

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

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

Answer 4

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 5

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

同时，Expanded改变了发送给rows和columns子节点的约束；它有助于填补那里的可用空间。因此，当您将孩子包装在 Expanded 小部件中时，它会填满空白。

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

1. 扩展：

2. 灵活的：

Answer 6

Expanded() 只不过是 Flexible() 与

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

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

FlexFit.tight = 想尽可能多地贴合父母。

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

Answer 7

如果您使用,Flexible而不是 ,的唯一区别Expanded是Flexible让其子项具有与自身相同或更小的宽度Flexible，而Expanded强制其子项具有与 . 完全相同的宽度Expanded。但是在调整自己的大小时，两者都Expanded忽略Flexible了孩子的宽度。

灵活的

小Flexible部件包装了一个小部件，因此小部件变得可调整大小。当 Flexible 小部件包装一个小部件时，该小部件将成为 Flexible 小部件的子级并被认为是灵活的。在布局不灵活的小部件后，小部件会根据它们的flex和fit属性调整大小。

展开

小Expanded部件可以包装小部件并强制小部件填充额外空间。

这是示例

用于Flexible调整 aRow或中的小部件的大小Column。这样，您可以调整子小部件的间距，同时保持其相对于其父小部件的大小。Expanded更改子小部件的约束，因此它填充任何空白空间。

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Expanded(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

注意：这意味着不可能按照Row孩子的大小成比例地展开孩子。Row 要么使用确切的孩子的宽度，要么在您使用Expandedor时完全忽略它Flexible。