我使用了Expanded和Flexible小部件,它们的工作原理似乎相同。扩展和灵活之间的区别是什么?
Expanded
Flexible
c3frrgcw1#
Scaffold( appBar: AppBar(), body: Column( children: <Widget>[ Row( children: <Widget>[ buildExpanded(), buildFlexible(), ], ), Row( children: <Widget>[ buildExpanded(), buildExpanded(), ], ), Row( children: <Widget>[ buildFlexible(), buildFlexible(), ], ), ], ), );
yxyvkwin2#
Expanded只是Flexible的简写以如下方式使用Expanded:
Expanded( child: Foo(), );
严格等价于:
Flexible( fit: FlexFit.tight, child: Foo(), );
当您需要不同的fit时,您可能希望使用Flexible而不是Expanded,这在某些响应布局中很有用。FlexFit.tight和FlexFit.loose之间的区别在于loose允许其子节点具有最大大小,而tight强制子节点填充所有可用空间。
fit
FlexFit.tight
FlexFit.loose
loose
tight
ruyhziif3#
Flexible下的小工具默认为WRAP_CONTENT,但您可以使用参数fit对其进行更改。Expanded下的小工具为MATCH_PARENT,您可以使用flex对其进行更改。
flex
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 ); }
sg24os4d5#
您可以使用Flexible来调整widget的 * 行 * 列 * 大小,主要用于调整不同子widget的间距,同时保持与父widget的关系。同时,Expanded改变了发送给 rows 和 * column * 的子节点的约束;它有助于填充那里的可用空间。2因此,当你把你的孩子 Package 在一个展开的小部件中时,它会填充空白的空间。从 *Flutter的官方YouTube频道 * 提供这些视频只是为了帮助人们,谁可能会在不久的将来寻找这个...1.**一个1.**第一个e第一个f第一个x
11dmarpk6#
Expanded()只不过是Flexible(),其中Flexible (fit: FlexFit.tight) = Expanded()但是,默认情况下,Flexible使用fit :FlexFit.loose。
Flexible (fit: FlexFit.tight) = Expanded()
fit :FlexFit.loose
FlexFit.tight=希望尽可能紧密地适合父对象,占用尽可能多的空间。FlexFit.loose=希望以尽可能小的空间松散地装入父对象。
5f0d552i7#
Expanded更改子小工具的约束条件,使其填充所有空白空间。Expanded小工具是一个专门的Flexible小工具,具有一组适合度- Flexible(适合度:FlexFit. tight。展开的小部件也有一个flex属性。Flexible使子部件具有灵活性并可调整大小。您可以添加flex或fit属性来调整大小和间距。
弹性配合特性包括:
vs91vp4v8#
灵活默认将共享父小工具的可用空间,但不强制子小工具适应该空间。扩展将共享父小工具的可用空间,并强制子小工具更改其宽度/高度以填充可用空间。
事实上,Expanded扩展了Flexible,Flexible是Flexible和FlexFit.tight的组合,请参见official document。下面是一个Container小部件和三个Flexible小部件(flex = 1, fit = FlexFit.loose)。我们可以看到这三个灵活的小部件共享同一个maxWidth(可用屏幕宽度的1/3),蓝色的想要比它大,其他的想要小。但正如我们所看到的,蓝色的家伙有maxWidth作为它的宽度和其他小部件的宽度正好适合他们的内容。
Container
flex = 1, fit = FlexFit.loose
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.')), ), ], )
c9qzyr3d9#
flutter中的Expanded widget是Flexible的缩写,默认为FlexFit.tight。Flexible widget在制作响应式应用程序中扮演着非常重要的角色。这将使应用程序在多种设备尺寸上的外观和感觉都相同。但如果用户只想用widget基本填充空间,那么可以使用Expanded。https://flutteragency.com/flexible-widget-in-flutter/这个博客解释了这两个小部件之间的主要区别,有时会让其他人感到困惑...
9条答案
按热度按时间c3frrgcw1#
yxyvkwin2#
Expanded
只是Flexible
的简写以如下方式使用
Expanded
:严格等价于:
当您需要不同的
fit
时,您可能希望使用Flexible
而不是Expanded
,这在某些响应布局中很有用。FlexFit.tight
和FlexFit.loose
之间的区别在于loose
允许其子节点具有最大大小,而tight
强制子节点填充所有可用空间。ruyhziif3#
Flexible
下的小工具默认为WRAP_CONTENT,但您可以使用参数fit
对其进行更改。Expanded
下的小工具为MATCH_PARENT,您可以使用flex
对其进行更改。ukqbszuj4#
Expanded
-它是具有固定配合的Flexible
sg24os4d5#
您可以使用Flexible来调整widget的 * 行 * 列 * 大小,主要用于调整不同子widget的间距,同时保持与父widget的关系。
同时,Expanded改变了发送给 rows 和 * column * 的子节点的约束;它有助于填充那里的可用空间。2因此,当你把你的孩子 Package 在一个展开的小部件中时,它会填充空白的空间。
从 *Flutter的官方YouTube频道 * 提供这些视频只是为了帮助人们,谁可能会在不久的将来寻找这个...
1.**一个
1.**第一个e第一个f第一个x
11dmarpk6#
Expanded()只不过是Flexible(),其中
Flexible (fit: FlexFit.tight) = Expanded()
但是,默认情况下,Flexible使用
fit :FlexFit.loose
。FlexFit.tight=希望尽可能紧密地适合父对象,占用尽可能多的空间。
FlexFit.loose=希望以尽可能小的空间松散地装入父对象。
5f0d552i7#
Expanded更改子小工具的约束条件,使其填充所有空白空间。Expanded小工具是一个专门的Flexible小工具,具有一组适合度- Flexible(适合度:FlexFit. tight。展开的小部件也有一个flex属性。
Flexible使子部件具有灵活性并可调整大小。您可以添加flex或fit属性来调整大小和间距。
弹性配合特性包括:
vs91vp4v8#
灵活默认将共享父小工具的可用空间,但不强制子小工具适应该空间。
扩展将共享父小工具的可用空间,并强制子小工具更改其宽度/高度以填充可用空间。
事实上,
Expanded
扩展了Flexible
,Flexible
是Flexible
和FlexFit.tight
的组合,请参见official document。下面是一个
Container
小部件和三个Flexible
小部件(flex = 1, fit = FlexFit.loose
)。我们可以看到这三个灵活的小部件共享同一个maxWidth
(可用屏幕宽度的1/3),蓝色的想要比它大,其他的想要小。但正如我们所看到的,蓝色的家伙有maxWidth
作为它的宽度和其他小部件的宽度正好适合他们的内容。下面是上图的代码:
c9qzyr3d9#
flutter中的Expanded widget是Flexible的缩写,默认为FlexFit.tight。Flexible widget在制作响应式应用程序中扮演着非常重要的角色。这将使应用程序在多种设备尺寸上的外观和感觉都相同。但如果用户只想用widget基本填充空间,那么可以使用Expanded。
https://flutteragency.com/flexible-widget-in-flutter/这个博客解释了这两个小部件之间的主要区别,有时会让其他人感到困惑...