Introduction to the

Row and Column are commonly used multi-child control container components, Row horizontal layout, Column vertical layout

Key Concepts:

  • mainAxisAlignmentSpindle alignment: Alignment in the same direction as the layout. Row is horizontal and Column is vertical
  • crossAxisAlignmentCross alignment: Alignment with the layout vertically, Row vertically and Column horizontally

Row

Row Alignment direction of spindle

MainAxisAlignment Alignment of the main axis of the Row control The default value is mainAxisalignment.start

Row(
   mainAxisAlignment: MainAxisAlignment.start,
   children: [
     Container(
       width: 100,
       height: 50,
       color: Colors.red,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.yellow,
     ),
     Container(
       width: 100,
       height: 50,
       color: Colors.green,
     )
   ],
)
Copy the code

Row Crosses the axis alignment direction

Row control. Default is crossAxisAlignment crossAxisAlignment cross shaft alignment center

 Row(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        Container(
          width: 100,
          height: 30,
          color: Colors.red,
        ),
        Container(
          width: 100,
          height: 50,
          color: Colors.yellow,
        ),
        Container(
          width: 100,
          height: 80,
          color: Colors.green,
        )
      ],
    );
Copy the code

The mainAxisSize property of Row

Indicates the size of the spindle. There are two ways: min and Max, default Max

Container(
     decoration: BoxDecoration(border: Border.all(color: Colors.black)),
     child: Row(
         mainAxisSize: MainAxisSize.min,
         ...
     ),
)
Copy the code

Max effect

Effect of min

Column

Column Specifies the alignment direction of the main axis

Column mainAxisAlignment main axis of the control mainAxisAlignment the default alignment is mainAxisAlignment. Start ‘

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)
Copy the code

Column Cross axis alignment direction

The Column control. Default is crossAxisAlignment crossAxisAlignment cross shaft alignment center

Container(
      color: Colors.blue,
      height: 400,
      width: 350,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Container(
             width: 100,
             height: 100,
             color: Colors.red,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.yellow,
          ),
          Container(
             width: 100,
             height: 100,
             color: Colors.green,
          ),
        ],
    )
)
Copy the code

Column’s mainAxisSize property

Indicates the size of the spindle. There are two ways: min and Max, default Max

Container(
     decoration: BoxDecoration(border: Border.all(color: Colors.black)),
     child: Column(
         mainAxisSize: MainAxisSize.min,
         ...
     ),
)
Copy the code

Max effect

Effect of min