chapter_4.3.md

4.3 Flexible layout (Flex)

Flexible layout allows child components to allocate parent container space in a certain proportion. The concept of flexible layout also exists in other UI systems, such as flexible box layout in H5, and Android FlexboxLayout. Flutter primarily by the elastic layout Flexand Expandedto fit achieved.

Flex

FlexThe components can be arranged in the horizontal or vertical direction. If you know the main axis direction, it Rowmay Columnbe more convenient to use, because Rowand Columnare inherited from Flex, and the parameters are basically the same, so you can basically use Rowor wherever Flex can be used Column. FlexThe function itself is very powerful, and it can also Expandedcooperate with components to achieve flexible layout. Next, we only discuss Flexthe attributes related to flexible layout (other attributes have been introduced in the introduction Rowand Columntime).

Flex({
 ...
 @required this.direction, //弹性布局的方向, Row默认为水平方向，Column默认为垂直方向
 List<Widget> children = const <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,
})

flexThe parameter is the coefficient of elasticity. If it is 0 or null, there childis no elasticity, that is, the space that will not be occupied by the expansion. If it is greater than 0, all the Expandedfree space of the spindle is divided according to its flex ratio. 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,
             ),
           ),
         ],
       ),
       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,
                 ),
               ),
               Spacer(
                 flex: 1,
               ),
               Expanded(
                 flex: 1,
                 child: Container(
                   height: 30.0,
                   color: Colors.green,
                 ),
               ),
             ],
           ),
         ),
       ),
     ],
   );
 }
}

The running effect is shown in Figure 4-5:

SpacerThe function in the example is to occupy a specified proportion of space. In fact, it is just Expandeda packaging class. SpacerThe source code is 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.