【Flutter】十三、Flutter中常用的布局容器——弹性布局Flex、Expanded

    弹性布局允许子widget按照一定比例来分配父容器空间,Flutter中的弹性布局主要通过Flex和Expanded来配合实现。

一、Flex

Flex可沿着水平或竖直方向对widget进行布局。

1.1 构造函数

Flex({
    Key key,
    @required this.direction, // 主轴方向：Axis.horizontal水平方向为主轴,即为Row；Axis.vertical垂直方向为主轴,即为Column
    this.mainAxisAlignment = MainAxisAlignment.start,
    this.mainAxisSize = MainAxisSize.max,
    this.crossAxisAlignment = CrossAxisAlignment.center,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    this.textBaseline,
    List<Widget> children = const <Widget>[],
  }) : assert(direction != null),
       assert(mainAxisAlignment != null),
       assert(mainAxisSize != null),
       assert(crossAxisAlignment != null),
       assert(verticalDirection != null),
       assert(crossAxisAlignment != CrossAxisAlignment.baseline || textBaseline != null),
       super(key: key, children: children);

相关属性与Column、Row相同，参考【Flutter】十二、Flutter中常用的布局容器——Row、Column。
示例代码

import 'package:flutter/material.dart';

class FlexDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget c1 = Container(
      width: 80.0,
      height: 150.0,
      color: Colors.yellow,
      child: Center(
        child: Text(
          'container1',
          style: TextStyle(
              color: Colors.white
          ),
        ),
      ),
    );
    Widget c2 = Container(
      width: 100.0,
      height: 100.0,
      color: Colors.cyanAccent,
      child: Center(
        child: Text(
          'container2',
          style: TextStyle(
              color: Colors.white
          ),
        ),
      ),
    );
    Widget c3 = Container(
      width: 160.0,
      height: 100.0,
      color: Colors.pinkAccent,
      child: Center(
        child: Text(
          'container3',
          style: TextStyle(
              color: Colors.white
          ),
        ),
      ),
    );
    Widget flexForRow = Flex(
      direction: Axis.horizontal,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.down,
      textBaseline: TextBaseline.ideographic,
      children: <Widget>[c1, c2, c3],
    );
    Widget flexForColumn = Flex(
      direction: Axis.vertical,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      textDirection: TextDirection.ltr,
      verticalDirection: VerticalDirection.down,
      children: <Widget>[c1, c2, c3],
    );
    // TODO: implement build
    return flexForRow;
  }
}

flexForRow效果：

flexForColumn效果：

二、Expanded

用在Flex、Column、Row中，用来占满主轴方向上的剩余空间。

    利用上面示例，将flexForRow中的c1改为Expanded(child: c1,)，你会发现水平方向上的空白没有了，c1将剩余空间占满，效果如下:

    Expanded中还有一个flex属性，该属性大于0时表示会自动占满剩余空间，默认为1。如果多个Expanded同时指定flex，flex的值就是这几个Expanded所占空间的比例。将上面flexForColumn的children改为如下：

	children: <Widget>[
        Expanded(
          child: c1,
        ),
        Expanded(
          child: c2,
        ),
        Expanded(
          child: c3,
        ),
      ]

    这三个Container高度被平均分配，这是因为flex默认值为1，所以这三个的高度比为1：1：1，如果设置flex分别为1、2、3，则这三个Container的高度比为1：2：3。