[shutter -- layout] flexible layout (flex and expanded)

Preface

Flutter The elastic layout in is mainly through Flex and Expanded To achieve .

This article mainly introduces Flutter Medium Flex Layout .

Flex

1. brief introduction

Flex Component can arrange its subcomponents horizontally or vertically , If you know the direction of the spindle , Use Row or Column It will be more convenient , because Row and Column Inherit from Flex, The parameters are basically the same , So you can use Flex Basically, all the places can be used Row or Column .

2. attribute

Flex Common properties are as follows ：
direction： Set the spindle direction , The settable value is Axis.horizontal and Axis.vertical, The cross axis is perpendicular to the spindle direction .

mainAxisAlignment： Setter Widget Arrangement along the main axis , Default MainAxisAlignment.start, The settings can be as follows ：

• MainAxisAlignment.start： Align left , The default value is ;
• MainAxisAlignment.end： Right alignment ;
• MainAxisAlignment.center： Align center ;
• MainAxisAlignment.spaceBetween： full-justified ;
• MainAxisAlignment.spaceAround： Every Widget Equally spaced on both sides , The distance from the edge of the screen is other Widget Half the interval between ;
• MainAxisAlignment.spaceEvently： Average distribution of each Widget, The distance from the edge of the screen is the same as other Widget The intervals between are equal .
  

mainAxisSize： Set the size of the spindle , Default MainAxisSize.max, The values that can be set are as follows ：

• MainAxisSize.max： The size of the spindle is the size of the parent container ;
• MainAxisSize.min： The size of the spindle is its capital Widget The sum of size .
  
  take mainAxisAlignment Set to spaceBetween, If mainAxisSize Set to max, It's the whole Row On the basis of width, according to spaceBetween Arrange in a way , If mainAxisSize Set to min, Three Container The sum of the widths is in accordance with spaceBetween Arrange in a way .

crossAxisAlignment： Setter Widget The arrangement along the cross axis , Default CrossAxisAlignment.center, The settings can be as follows ：

• CrossAxisAlignment.start： Align with the starting position of the cross axis ;
• CrossAxisAlignment.end： Align with the end of the cross axis ;
• CrossAxisAlignment.center： Align center ;
• CrossAxisAlignment.stretch： Fill the entire cross axis ;
• CrossAxisAlignment.baseline： Align according to the baseline of the first line of text .

verticalDirection： Sets the vertical direction of the child Widget The order of arrangement , The default is VerticalDirection.down, The setting method is as follows ：

• VerticalDirection.down：start At the top ,end At the bottom ;
• VerticalDirection.up：start At the bottom ,end At the top .
  

textBaseline： Sets the baseline type for text alignment , The values that can be set are as follows ：

• TextBaseline.alphabetic： Align with the letter baseline ;
• TextBaseline.ideographic： Align with ideographic baseline ;

Expanded

Expanded It can be scaled or expanded Row、Column and Flex The amount of space occupied by the subcomponent .

1. attribute

• key
  It's a unique identifier

• flex
  Coefficient of elasticity
  If 0 or null, be child There is no flexibility , That is, the space that will not be occupied by expansion .
  If it is greater than 0, be-all Expanded According to it flex The proportion of the spindle to divide all the free space .

example

1. design sketch

2. Code example

import 'package:flutter/material.dart';

void main() {
    
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
    
  const MyApp({
    Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    
    return MaterialApp(
        title: 'Welcome to Flutter',

        home: Scaffold(
            appBar: AppBar(
              title: Text(' Elastic layout '),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Flex(
                    direction: Axis.horizontal,
                    children: <Widget>[
                      Expanded(
                        flex: 1,
                        child: Container(
                          color: Colors.pink,
                          child: FlutterLogo(
                            size: 50.0,
                          ),
                        ),
                      ),

                      Expanded(
                        flex: 1,
                        child: Container(
                          color: Colors.green,
                          child: FlutterLogo(
                            size: 50.0,
                          ),
                        ),
                      ),

                    ],
                  ),

                  Padding(
                    padding: EdgeInsets.only(top: 20.0),
                    child: SizedBox(
                      height: 100.0,
                      child: Flex(
                        direction: Axis.vertical,
                        children: <Widget>[
                          Expanded(
                            flex: 2,
                            child: Container(
                              height: 30.0,
                              color: Colors.blue,
                            ),
                          ),

                          Spacer(
                            flex: 1,
                          ),

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