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(),
);

---

当您想要不同的

Flexible

时，您可能需要使用

Expanded

而不是

fit

，这在某些响应式布局中很有用。

FlexFit.tight

和

FlexFit.loose

之间的区别在于，

loose

将允许其子级具有最大尺寸，而

tight

则强制该子级填充所有可用空间。

Answer 3

Flexible

下的小部件默认为

WRAP_CONTENT，尽管您可以使用参数fit

更改它。

Expanded

下的小部件是

MATCH_PARENT

，您可以使用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

来调整 rows 和 columns 中小部件的大小。主要用于调整不同子控件的空间，同时保持与父控件的关系。 同时，

Expanded

更改发送到rows和columns子级的约束；它有助于填补那里的可用空间。因此，当您将孩子包裹在扩展小部件中时，它会填充空白空间。 提供来自

Flutter 官方 YouTube 频道

的这些视频只是为了帮助人们，他们可能会在不久的将来寻找此内容......

1. 扩展：

2. 灵活：

Answer 6

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

但是，Flexible 默认使用

fit :FlexFit.loose

。

FlexFit.tight

= 希望紧密贴合父母，占用尽可能多的空间。

FlexFit.loose

= 希望宽松地适合父母，占用尽可能少的空间。

Answer 7

Expanded

更改子窗口小部件的约束，以便它填充任何空白空间。扩展小部件是一种专门的灵活小部件，具有固定的适合性 - 灵活（适合：FlexFit.tight。扩展小部件还具有 flex 属性。

Flexible

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

FlexFit.loose - 使用小部件的首选尺寸。 （默认）

• FlexFit.tight - 强制小部件填充其所有额外空间。

Answer 8

Flexible

默认将共享父窗口小部件的可用空间，但不会强制子窗口适应空间。 Expanded

将共享父窗口小部件的可用空间，并强制子窗口小部件更改其宽度/高度以

填充可用空间。 事实上，Expanded

延伸了

Flexible

，这是一个带有

Flexible

的

FlexFit.tight

。请参阅

官方文档

。

这里有一个 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.')),
            ),
          ],
        )

flutter中的Expanded widget是Flexible的简写，默认适配为FlexFit.tight。灵活的小部件在制作响应式应用程序中发挥着非常重要的作用。这将使应用程序在多种设备尺寸上看起来和感觉都相同。但如果您只想通过小部件基本填充空间，那么您可以使用 Expanded。

Answer 9

https://flutteragency.com/flexible-widget-in-flutter/

该博客解释了这两个小部件之间的主要区别，这些区别有时会让其他人感到困惑......

这是扩展与灵活的最佳示例

Answer 10

Scaffold(
      body: Column(
        children: [
          Flexible(
            child: Container(
              color: Colors.grey,
              child: ListView.builder(
                shrinkWrap: true,
                  itemCount: 6,
                  itemBuilder: (context,index){
                    return ListTile(title: Text('$index'),);
                  }),
            ),
          )
        ],
      ),
    )

灵活的将占用尽可能多的空间，而扩展将占用尽可能多的空间..要查看差异，请用扩展小部件替换灵活..它将占据所有可能的空间...

Flutter Expanded 与 Flexible 之间的区别：

Answer 11

Expanded 是“灵活且紧密配合”的简写。扩展类通过贴合属性 FlexFit.tight 扩展了 Flexible 类。

扩展

：当您想要在子级之间均匀分配剩余空间时使用。

灵活

：当您需要精确控制如何在具有不同弹性系数的子级之间分配空间时使用。

给定链接中解释了代码的详细差异：

https://www.codecappuccino.com/post/flutter-expanded-vs-flexible