Rows and columns in a Flutter are called linear layout. Linear layout means that the subcomponents are arranged horizontally or vertically.

The concept of the shaft

For linear layouts, there is a main axis and a vertical axis.

If the layout is horizontal, then the main axis is horizontal and the vertical axis is vertical.

If the layout is vertical, then the main axis is vertical and the vertical axis is horizontal.

In a linear layout, there are two enumerated classes that define alignment alignment, MainAxisAlignment and CrossAxisAlignment, representing spindle alignment and vertical alignment, respectively.

Row

Row can arrange its children horizontally

Constructors are as follows:

Row({
	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>[],
})
Copy the code

Attribute interpretation

textDirection

Represents the layout order of the horizontal child components (left to right or right to left), left to right by default

mainAxisSize

Max means as much horizontal space as possible and MainAxisSize. Min means as little horizontal space as possible

mainAxisAlignment

(Equivalent to Flex layout in H5 processing project spare space – Flex Layout tutorial)

Represents how the child components are aligned in the horizontal space occupied by the Row (this property only makes sense if mainAxisSize is mainAxissize.max)

  • Mainaxisalignment. start indicates that text is aligned in the initial direction of textDirection. (For example, if textDirection is textDirection. LTR, it indicates left alignment. If textDirection is textdirection. RTL, textDirection is aligned from the right.

  • Mainaxisalignment. end and mainAxisalignment. start are the opposite;

  • Mainaxisalign. center Indicates that the text content is center aligned

  • MainAxisAlignment. SpaceAround said equal spare space on either side of each component

  • MainAxisAlignment. SpaceBetween said it will rich the space was divided into (1) content

  • MainAxisAlignment. SpaceEvenly said rich space divided into (+ 1), (use)

Code examples:

child: Column( children: <Widget>[ Row( mainAxisAlignment: MainAxisAlignment.start, children: <Widget>[Text(" XXX "), Text('yyy'), Text(' ZZZ ')],), Divider(), // indicates a Row(mainAxisAlignment: MainAxisAlignment.end, children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')], ), Divider(), Row( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')], ), Divider(), Row( mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')], ), Divider(), Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')], ), Divider(), Row( mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[Text("xxx"), Text('yyy'), Text('zzz')], ), ], ),Copy the code

Operation effect:

verticalDirection

Indicates the alignment of the vertical axis of the Row. The default is verticaldirection. down, which indicates from top to bottom.

crossAxisAlignment

The height of Row is equal to the height of the highest child element in the child component. The value is the same as the MainAxisAlignment (start, end, and center).

The difference is that the reference system for crossAxisAlignment is verticalDirection,

If verticalDirection is verticaldirection. down crossAxisAlignment. Start crossAxisAlignment.

When verticalDirection is verticaldirection. up, crossAxisAlignment. Start indicates bottom alignment. Crossaxisalignment. end and crosSAXisalignment. start are the opposite;

children

Subcomponent array

Column

Column can arrange its children vertically. The arguments are the same as Row except that the layout is vertical and the main axis is opposite.

Constructors are 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>[],
})
Copy the code

Note:RowandColumnBoth take up as much space as possible in the main axis, while the length of the vertical axis depends on the length of their largest child element

If we want text controls to be aligned in the middle of the entire phone screen, we have two methods:

  1. willColumnThe width specified is the screen width that we can pass throughConstrainedBoxorSizedBoxTo force a change in the width limit,

Such as:

ConstrainedBox(
  constraints: BoxConstraints(minWidth: double.infinity), 
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello"),
      Text("World"),
    ],
  ),
);
Copy the code

Set minWidth to double. Infinity to make the width take up as much space as possible.

  1. useCenterThe Widget.

Controls the nested

If you nested a Row inside a Row, or a Column inside a Column,

So only the outermost Row or Column will take up as much space as possible, and the inner Row or Column will take up the actual amount of space,

Example:

Container(color: color.green, child: Padding(Padding: const edgeinsets. all(16.0), child: Column(crossAxisAlignment: CrossAxisAlignment. Start, mainAxisSize: mainAxisSize. Max, / / effective, outer colom height for the entire screen children: < widgets > [Container (color: Color. red, child: Column(mainAxisSize: mainAxisSize. Max,// invalid, Colum height is actual height children: <Widget>[ Text("hello world "), Text("I am Jack "), ], ), ) ], ), ), );Copy the code

To make the inside Column fill the outside Column, use Expanded components:

Expanded( child: Container( color: Colors.red, child: Column( mainAxisAlignment: MainAxisAlignment center, / / centered vertically aligned children: < widgets > [Text (" hello world "), Text (" I am Jack "),],),),)Copy the code

For information about the use of Expanded, see the article “Flutter layout Controls” –>Flex, Expanded

portal

Flutter layout controls –>Align, Center

21. Stack, tourists

Flutter layout controls –>Wrap, Flow

Flutter layout controls –>Flex, Expanded

T_T