Flex&Expand

Flex

Flex可以沿着水平或垂直方向排列子widget,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方一定可以使用Row或Column。Flex本身功能是很强大的,它也可以和Expanded配合实现弹性布局,接下来我们只讨论Flex和弹性布局相关的属性(其它属性已经在介绍Row和Column时介绍过了)。

Flex({
  ...
   this.direction, //弹性布局的方向, Row默认为水平方向,Column默认为垂直方向
  List<Widget> children = const <Widget>[],
})

Flex继承自MultiChildRenderObjectWidget,对应的RenderObject为RenderFlex,RenderFlex中实现了其布局算法。

Expanded

可以按比例“扩伸”Row、Column和Flex子widget所占用的空间。

const Expanded({
  int flex = 1, 
   Widget child,
})

flex为弹性系数,如果为0或null,则child是没有弹性的,即不会被扩伸占用的空间。如果大于0,所有的Expanded按照其flex的比例来分割主轴的全部空闲空间


 上一篇
Stack&Positioned Stack&Positioned
层叠布局层叠布局和Web中的绝对定位、Android中的Frame布局是相似的,子widget可以根据到父容器四个角的位置来确定本身的位置。绝对定位允许子widget堆叠(按照代码中声明的顺序)。Flutter中使用Stack和Positi
2019-02-26
下一篇 
Wrap&Flow Wrap&Flow
Wrap在介绍Row和Colum时,如果子widget超出屏幕范围,则会报溢出错误,如: Row( children: <Widget>[ Text("xxx"*100) ], ); 可以看到,右边溢出部分报错。这是
2019-02-26
  目录