dart 扑动:扩张vs柔性

slmsl1lt  于 2023-03-10  发布在  其他
关注(0)|答案(9)|浏览(106)

我使用了ExpandedFlexible小部件,它们的工作原理似乎相同。
扩展和灵活之间的区别是什么?

c3frrgcw

c3frrgcw1#

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

yxyvkwin

yxyvkwin2#

Expanded只是Flexible的简写
以如下方式使用Expanded

Expanded(
  child: Foo(),
);

严格等价于:

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

当您需要不同的fit时,您可能希望使用Flexible而不是Expanded,这在某些响应布局中很有用。
FlexFit.tightFlexFit.loose之间的区别在于loose允许其子节点具有最大大小,而tight强制子节点填充所有可用空间。

ruyhziif

ruyhziif3#

Flexible下的小工具默认为WRAP_CONTENT,但您可以使用参数fit对其进行更改。
Expanded下的小工具为MATCH_PARENT,您可以使用flex对其进行更改。

ukqbszuj

ukqbszuj4#

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

sg24os4d5#

您可以使用Flexible来调整widget的 * 行 * 列 * 大小,主要用于调整不同子widget的间距,同时保持与父widget的关系。
同时,Expanded改变了发送给 rows 和 * column * 的子节点的约束;它有助于填充那里的可用空间。2因此,当你把你的孩子 Package 在一个展开的小部件中时,它会填充空白的空间。
从 *Flutter的官方YouTube频道 * 提供这些视频只是为了帮助人们,谁可能会在不久的将来寻找这个...
1.**一个
1.**第一个e第一个f第一个x

11dmarpk

11dmarpk6#

Expanded()只不过是Flexible(),其中
Flexible (fit: FlexFit.tight) = Expanded()
但是,默认情况下,Flexible使用fit :FlexFit.loose

FlexFit.tight=希望尽可能紧密地适合父对象,占用尽可能多的空间。
FlexFit.loose=希望以尽可能小的空间松散地装入父对象。

5f0d552i

5f0d552i7#

Expanded更改子小工具的约束条件,使其填充所有空白空间。Expanded小工具是一个专门的Flexible小工具,具有一组适合度- Flexible(适合度:FlexFit. tight。展开的小部件也有一个flex属性。
Flexible使子部件具有灵活性并可调整大小。您可以添加flex或fit属性来调整大小和间距。

弹性配合特性包括:

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

vs91vp4v

vs91vp4v8#

灵活默认将共享父小工具的可用空间,但强制子小工具适应该空间。
扩展将共享父小工具的可用空间,并强制子小工具更改其宽度/高度以填充可用空间

事实上,Expanded扩展了FlexibleFlexibleFlexibleFlexFit.tight的组合,请参见official document
下面是一个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.')),
            ),
          ],
        )
c9qzyr3d

c9qzyr3d9#

flutter中的Expanded widget是Flexible的缩写,默认为FlexFit.tight。Flexible widget在制作响应式应用程序中扮演着非常重要的角色。这将使应用程序在多种设备尺寸上的外观和感觉都相同。但如果用户只想用widget基本填充空间,那么可以使用Expanded。
https://flutteragency.com/flexible-widget-in-flutter/这个博客解释了这两个小部件之间的主要区别,有时会让其他人感到困惑...

相关问题