iOS- Flutter 布局组件-弹性布局

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 16 天，点击查看活动详情

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

Flex

Flex组件可以沿着水平或垂直方向排列子组件，如果知道主轴方向，使用Row或者Column会方便一些，因为Row和Column都继承自Flex，参数基本相同，所以能使用FLex的地方基本上都可以使用Row或Column，Flex本身功能很强大，它也可以和Expanded组件配合实现弹性布局。

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

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

Expanded

Expanded只能作为Flex的子组件，否则会报错，它可以按比例扩伸Flex子组件所占用的空间。因为Row和Column都继承自Flex，所以Expanded也可以作为它们都子组件。 Flex参数为弹性参数，如果为0或者null，则child是没用弹性的，则不会被扩伸占用的空间，如果大于0，所有的Expanded按照其Flex的比例来分割主轴的全部空间。

class FlexLayoutTestRoute extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(//垂直布局
      children: <Widget>[
        //Flex的两个子widget按1：2来占据水平空间  
        Flex(
          direction: Axis.horizontal,//水平方向
          children: <Widget>[
            Expanded(//
              flex: 1,//等比分割，比如总共是两个第一个是flex=1 第二个flex = 2，加一起flex值为3，那么第一个的宽度则占总宽度的1/3，第二个则为总宽度的2/3
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                height: 30.0,
                color: Colors.green,
              ),
            ),
          ],
        ),
        Padding(
          padding: const EdgeInsets.only(top: 20.0),//头部间隔20
          child: SizedBox(
            height: 100.0,
            //Flex的三个子widget，在垂直方向按2：1：1来占用100像素的空间  
            child: Flex(//总共分为4份
              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,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}
//Expanded的包装类，功能是占用指定比例空间
class Spacer extends StatelessWidget {
  const Spacer({Key? key, this.flex = 1})
    : assert(flex != null),
      assert(flex > 0),
      super(key: key);
  
  final int flex;

  @override
  Widget build(BuildContext context) {
    return Expanded(
      flex: flex,
      child: const SizedBox.shrink(),
    );
  }
}

弹性布局比较简单，唯一需要注意的就是Row、Column以及Flex的关系。