Flutter layout class components: an elastic layout (the Flex)

Foreword

Flexible layout allows the subassembly to allocate a certain percentage of the parent container space, Flutter to fit the layout of the elastic mainly through Flex and Expanded.

Flex

Flex components may be arranged along a horizontal or vertical direction sub-assembly, if you know the direction of the spindle, or the Row Column be convenient since the Row and Column inherit from Flex, substantially the same parameters, where it can be used substantially can Flex use Row or Column. Flex function itself is very powerful, it can also be achieved with elastic components and Expanded layout. Flex inherited from MultiChildRenderObjectWidget, corresponding RenderObject is RenderFlex, RenderFlex algorithm is implemented in its layout.

Flex Interface Description

Flex({
    Key key,
    // 弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
    @required this.direction,
    // 以下同线性布局
    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>[],
  }) 

Expanded

Can be scaled "stretch expanded" space Row, Column and Flex subassembly occupied.

Expanded Interface Description

const Expanded({
    Key key,
    // 参数为弹性系数，如果为0或null，则child是没有弹性的，即不会被扩伸占用的空间。
    // 如果大于0，所有的Expanded按照其flex的比例来分割主轴的全部空闲空间。
    int flex = 1,
    @required Widget child,
  })

The sample code

import 'package:flutter/material.dart';

class FlexTest extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Column(

      children: <Widget>[
        // Flex的两个子widget按1:2来占据水平空间
        Flex(
          direction: Axis.horizontal,
          children: <Widget>[
            Expanded(
              flex: 1,
              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),
          child: SizedBox(
            height: 100.0,
            // Flex的三个子widget，在垂直方向按2:1:1来占用100像素的空间
            child: Flex(
              direction: Axis.vertical,
              children: <Widget>[
                Expanded(
                  flex: 2,
                  child: Container(
                    height: 30.0,
                    color: Colors.red,
                  ),
                ),

                // 占用指定比例的空间，实际上它只是Expanded的一个包装类
                Spacer(
                  flex: 1,
                ),

                Expanded(
                  flex: 1,
                  child: Container(
                    height: 30.0,
                    color: Colors.green,
                  ),
                )

              ],
            ),
          ),
        )

      ],
    );
  }
}