Flutter layout ---- elastic layout (Flex)

Elastic layout (Flex)

Flexible layout allows the subassembly to allocate a certain percentage of the parent container space. Concept of an elastomeric layout UI there are also other systems, such as the layout of the resilient cartridge in H5, Android the FlexboxLayoutlike. Flutter primarily by the elastic layout Flexand Expandedto fit achieved.

Flex

FlexAssembly may be arranged along a horizontal or vertical direction sub-assembly, if you know the direction of the spindle, to use Rowor Columnmay be convenient since Row, and Columnare inherited from Flex, substantially the same parameters, it can be used where Flex basically be used Rowor Column. FlexFunction itself is very powerful, and it can also be Expandedcomponents with the realization of elastic layout. Next we discuss only Flexand elastic layout-related properties (other attributes have been introduced Rowand Columnintroduced over time).

The Flex ({ 
  ... 
  @required this.direction, // the layout direction of the elastic, Row default horizontal direction, Column default vertical direction 
  List < the Widget > Children = const < the Widget > [], 
})

FlexInherited from MultiChildRenderObjectWidgetthe corresponding RenderObjectis RenderFlex, RenderFlexto achieve its layout algorithm.

Expanded

It can be scaled "expanding stretch"  Row, Columnand Flexthe space occupied by the subassembly.

const Expanded({
  int flex = 1, 
  @required Widget child,
})

flexParameter is the spring constant, or if it is 0 null, it childis not resilient, i.e., space is not occupied by the expanded stretched. If more than 0, all Expandedin proportion to the divided spindle which flex the entire free space. Let's look at an example:

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,
              child: Container(
                height: 30.0,
                color: Colors.red,
              ),
            ),
            Expanded(
              flex: 2 , 
              Child: Container ( 
                height: 30.0 , 
                Color: Colors.green, 
              ), 
            ), 
          ], 
        ), 
        the Padding ( 
          padding: const EdgeInsets.only (Top: 20.0 ), 
          Child: SizedBox ( 
            height: 100.0 ,
             // the Flex the three sub-widget, in the vertical direction by 2: 1: 1 to 100 pixels space   
            child: the Flex ( 
              direction: Axis.vertical, 
              Children: <the 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,
                  ),
                ),
              ],
            ),
          ),
        ),
      ],
    );
  }
}

Operating results as shown:

 

 The exemplary Spacerfunction is specified space ratio, it is actually just Expandeda wrapper class Spacersource code as follows:

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(),
    );
  }
}

summary

Elastic layout is relatively simple, the only caveat is that Row, Columnas well as Flexrelationships.