弹性布局

Flex

Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些。

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

水平排列的情况

Flex(
  direction: Axis.horizontal,
  children: <Widget>[
    Expanded(
      flex: 1,
      child: Container(
        height: 30.0,
        color: Colors.red,
        child: Text('Hello ')
      ),
    ),
    Expanded(
      flex: 2,
      child: Container(
        height: 30.0,
        color: Colors.green,
        child: Text('world')
      ),
    ),
  ],
);

以上, 左右两个子元素的比例为 2:1

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

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

垂直排列的情况

Flex(
  direction: Axis.vertical,
  children: <Widget>[
    Expanded(
      flex: 2,
      child: Container(
        height: 30.0,
        color: Colors.red,
      ),
    ),
    Spacer(
      flex: 1,
    ),
    Expanded(
      flex: 1,
      child: Container(
        height: 30.0,
        color: Colors.green,
      ),
    ),
  ],
);

以上, 上中下三个子元素的比例为 2:1:1

其中, Spacer的功能是占用指定比例的空间, 实际上它只是Expanded的一个包装类

行与列

Row 和 Column 都继承自 Flex 组件

Row

Row可以在水平方向排列其子widget。定义如下:

Row({
  ...
  TextDirection textDirection,
  MainAxisSize mainAxisSize = MainAxisSize.max,
  MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
  VerticalDirection verticalDirection = VerticalDirection.down,
  CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
  List<Widget> children = const <Widget>[],
})

Column

Column可以在垂直方向排列其子组件。参数和Row一样,不同的是布局方向为垂直,主轴和交叉轴正好相反

属性

textDirection

主轴排列方式

取值:

  • TextDirection.ltr (默认)
  • TextDirection.rtl

mainAxisSize

主轴宽度

取值:

  • MainAxisSize.max (默认)
  • MainAxisSize.min

mainAxisAlignment

主轴对齐方式

取值:

  • MainAxisAlignment.start (默认)
  • MainAxisAlignment.end
  • MainAxisAlignment.center

如果 mainAxisSize 取值为 MainAxisSize.min, 则此属性无效

mainAxisAlignmenttextDirection 有关

  • textDirectionTextDirection.ltr, 则row: start为左, end为右; column: start为上, end为下
  • textDirectionTextDirection.rtl, 则row: start为右, end为左; column: start为下, end为上

verticalDirection

交叉轴排列方式

取值:

  • VerticalDirection.down (默认)
  • VerticalDirection.up

crossAxisAlignment

交叉轴对齐方式

取值:

  • CrossAxisAlignment.start
  • CrossAxisAlignment.center (默认)
  • CrossAxisAlignment.start

crossAxisAlignmentverticalDirection 有关

  • verticalDirectionVerticalDirection.down, 则row: start为上, end为下; column: start为左, end为右
  • verticalDirectionVerticalDirection.up, 则row: start为下, end为上; column: start为右, end为左

MIT Licensed | Copyright © 2018-present 滇ICP备16006294号

Design by Quanzaiyu | Power by VuePress