弹性布局

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 的一个包装类

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

Design by Quanzaiyu | Power by VuePress