[shutter -- layout] linear layout (row and column)

Row

1. brief introduction

stay Flutter A very common multi child node control in , take children Line up . I think it's a reference Web in Flex Layout , So many attributes and performances , It's all similar . But be careful , It doesn't have a scrolling property , If it's more than one line , stay debug The overflow prompt will be displayed below .

2. attribute

MainAxisAlignment： Alignment in spindle direction , Would be right child It's where it works , The default is start.

among MainAxisAlignment Enumerated values ：

• center： take children Placed in the center of the spindle ;
• end： take children Place at the end of the spindle ;
• spaceAround： Divide the blank area in the direction of the spindle equally , bring children The blank areas between are equal , But first and last child The blank area of is 1/2;
• spaceBetween： Divide the blank area in the direction of the spindle equally , bring children The blank areas between are equal , Head and tail child All close to the head and tail , There is no gap ;
• spaceEvenly： Divide the blank area in the direction of the spindle equally , bring children The blank areas between are equal , Including head and tail child;
• start： take children Place at the starting point of the spindle ;

among spaceAround、spaceBetween as well as spaceEvenly The difference between , It's about the head and the tail child The way . The distance from the beginning to the end is that of the blank area 1/2、0、1.

MainAxisSize： The value of the space occupied in the direction of the spindle , The default is max.

MainAxisSize There are two values of ：

• max： According to the incoming layout constraints , Maximize the available space in the spindle direction ;
• min： And max contrary , Is to minimize the available space in the direction of the principal axis ;

CrossAxisAlignment：children Alignment in the direction of the cross axis , And MainAxisAlignment It's a little different .

CrossAxisAlignment Enumeration values are as follows ：

• baseline： In the direction of the cross axis , bring children Of baseline alignment ;
• center：children Centered on the cross axis ;
• end：children Show at the end of the cross axis ;
• start：children Show at the starting point on the cross axis ;
• stretch： Give Way children Fill in the direction of the cross axis ;

TextDirection： Compatibility settings for Arabic Department , Generally, there is no need to deal with .

VerticalDirection： Defined children Order of placement , The default is down.

VerticalDirection There are two kinds of enumeration values ：

• down： from top To bottom Make a layout ;
• up： from bottom To top Make a layout .

top Corresponding Row as well as Column Words , It's the left and the top ,bottom Words , Right and bottom .

TextBaseline： The use of TextBaseline The way , There are two kinds of , I've already introduced .

3. example

1. design sketch

2. Code

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(' Linear layout '),
            ),
            body: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.pink,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),
                ],
              ),
            )
        )

    );
  }
}

Column

1. brief introduction

Column Is a control used to vertically display multiple child controls .Column This control will not scroll . If you have a row of controls that can scroll when there is not enough space , Consider using ListView class .

The constructor is as follows ：

Column({
    
	Key key,
	MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
	MainAxisSize mainAxisSize = MainAxisSize.max,
	CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
	TextDirection textDirection,
	VerticalDirection verticalDirection = VerticalDirection.down,
	TextBaseline textBaseline,
	List<Widget> children = const <Widget>[],
})

notes ：Row and Column Will only occupy as much space as possible in the direction of the main axis , The length of the vertical axis depends on the length of their largest child elements

2. attribute

Properties and Row equally .

3. example

1. design sketch

2. Code

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(' Linear layout '),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.blue,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.pink,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),

                  Container(
                    color: Colors.purple,
                    child: FlutterLogo(
                      size: 50.0,
                    ),
                  ),
                ],
              ),
            )
        )

    );
  }
}