Column of Flutter basic layout

Column means vertical layout, and the sub-controls it contains can be arranged vertically

code show as below:

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Column(
            children: [
              Container(
                width: 120,
                height: 100,
                color: Colors.red,
              ),
              Container(
                width: 150,
                height: 100,
                color: Colors.yellow,
              ),
              Container(
                width: 180,
                height: 100,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The effect is as follows:

Let's take a look at several parameters that Column has

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>[],
  })

MainAxisAlignment: The main axis alignment is the vertical alignment of the Column neutron controls (PS: For Column, the main axis is the vertical direction, for Row, the main axis is the horizontal direction)

There are several optional values:

MainAxisAlignment.start: Arranged at the top (from the structure of Column, it can be seen that this is the default value)

MainAxisAlignment.end: Arranged at the bottom. code show as below:

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          color: Colors.lightGreen,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: [
              Container(
                width: 100,
                height: 120,
                color: Colors.red,
              ),
              Container(
                width: 100,
                height: 150,
                color: Colors.yellow,
              ),
              Container(
                width: 100,
                height: 180,
                color: Colors.blue,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

The effect is as follows:

MainAxisAlignment.center: Centered.

The code is almost the same as above, so I won't paste it. The effect is as follows:

MainAxisAlignment.spaceAround: The upper and lower intervals of each sub-component are equal, that is, the margin is equal. The effect is as follows:

MainAxisAlignment.spaceBetween: both ends are aligned, that is, the first subcomponent is on the top, the last subcomponent is on the bottom, and the remaining components are evenly distributed in the middle. The effect is as follows:

MainAxisAlignment.spaceEvenly: Each sub-component is evenly distributed, that is, the vertical space is evenly distributed. The effect is as follows:

CrossAxisAlignment: The cross axis alignment is the alignment of the sub-controls in the Column neutron in the horizontal direction. The so-called cross axis is the direction perpendicular to the main axis (PS: for Column, its cross axis is the horizontal direction. For Row, Its cross axis is the vertical direction)

crossAxisAlignment has the following optional values

CrossAxisAlignment.center: The sub-components are centered in the Column (you can see from the structure of the Column that this is the default value), so the sub-controls in Figure 1 will be centered in the vertical direction.

CrossAxisAlignment.start: Subcomponents are left-aligned in the Column, the effect is as follows

CrossAxisAlignment.end: Subcomponents are right aligned in Column

The effect is as follows:

CrossAxisAlignment.stretch: The cross axis is stretched to fill the parent layout.

The effect is as follows:

MainAxisSize: Main axis size adaptation, there are two optional values

MainAxisSize.min: keep the height consistent with the child controls

code show as below

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          color: Colors.lightGreen,
          child: Container(
            color: Colors.blueGrey,
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Container(
                  width: 120,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 180,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

The effect is as follows:

MainAxisSize.max: The height is filled with the main axis direction (this is the default value)

The effect is as follows:

VerticalDirection: The order in which subcomponents are arranged in the vertical direction. Column is arranged from top to bottom by default. If this is set, it can be arranged from bottom to top

Possible values ​​are:

 --VerticalDirection.down: arrange from top to bottom (this is the default direction)

 --VerticalDirection.up: arrange from bottom to top

class _TestState extends State<DemoPage2> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          alignment: Alignment.center,
          color: Colors.lightGreen,
          child: Container(
            color: Colors.blueGrey,
            child: Column(
              mainAxisSize: MainAxisSize.max,
              verticalDirection: VerticalDirection.up,
              children: [
                Container(
                  width: 120,
                  height: 100,
                  color: Colors.red,
                ),
                Container(
                  width: 150,
                  height: 100,
                  color: Colors.yellow,
                ),
                Container(
                  width: 180,
                  height: 100,
                  color: Colors.blue,
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

The effect is as follows:

The introduction is over~