Linear layout (Row and Column)
The so-called linear layout, referring to horizontal or vertical direction arrangement subassembly. Flutter be achieved by linear placement of the Row and Column, similar to the Android LinearLayout control. Row and Column are inherited from Flex.
The spindle and the longitudinal axis
of the linear arrangement, and a longitudinal axis of the sub-spindle, if the layout is in the horizontal direction, the horizontal direction refers to the main shaft, i.e., the vertical direction and the vertical axis; if the layout in the vertical direction, the vertical direction refers to the spindle, The vertical axis is the horizontal direction. Linear arrangement, there are two CrossAxisAlignment and enumeration class MainAxisAlignment defined alignment, representing aligned with the longitudinal axis of the spindle and aligned.
The ROW
Row child widget which may be arranged in a horizontal direction. It is defined as follows:
/**
* 行布局
* * Row({
Key key,
//mainAxisAlignment主轴上的对齐方式
//center：将children放置在主轴的中心；
//end：将children放置在主轴的末尾；
//spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾空白区域为children之间的1/2；
//spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾没有空白区域；
//spaceEvenly：将主轴方向上的空白区域均分，使得children之间和收尾的空白区域相等；
//start：将children放置在主轴的起点；
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>[],
})
*/
- textDirection: a layout direction sub-assembly level order (from left to right or right to left), defaults to the current text direction Locale environment system (such as Chinese, English are from left to right, while Arabic is from right to the left).
- mainAxisSize: Row represents the space occupied by the spindle (horizontal) direction, by default
MainAxisSize.max, represents as much space occupied by the horizontal direction, then no matter how much the actual level of child widgets footprint, Row width is always equal to the horizontal direction of maximum width; MainAxisSize.min the occupancy level indicates little space as possible, when the level of sub-assembly does not occupy the remaining space, the actual width Row is equal to any level in the space occupied by the sub-assembly - mainAxisAlignment: represents a sub-assembly in the horizontal alignment of the space occupied by Row, if mainAxisSize value MainAxisSize.min, this property is meaningless, because the width equal to the width of the subassembly of Row. Only when the value mainAxisSize MainAxisSize.max, this property is significant, MainAxisAlignment.start textDirection represents the initial alignment direction, such as when the value of textDirection TextDirection.ltr, represents the MainAxisAlignment.start left justified, textDirection value of when expressed TextDirection.rtl right alignment. MainAxisAlignment.end and the opposite MainAxisAlignment.start; MainAxisAlignment.center is centered. Readers can be understood: textDirection is the reference system mainAxisAlignment.
- verticalDirection: Row indicates a longitudinal axis (vertical) direction of alignment, the default is VerticalDirection.down, showing from top to bottom.
- crossAxisAlignment: indicates the alignment subassembly in longitudinal direction, Row subassembly of a height equal to the highest sub-element height, and its value as MainAxisAlignment (three values start, end, center), except that the crossAxisAlignment reference frame is verticalDirection, i.e., refers to the top crossAxisAlignment.start VerticalDirection.down when aligned verticalDirection value, verticalDirection VerticalDirection.up value when, crossAxisAlignment.start bottom alignment means; crossAxisAlignment.end and the opposite crossAxisAlignment.start;
- children: an array of sub-assemblies.
Example:
Column(
//测试Row对齐方式，排除Column默认居中对齐的干扰
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(" hello world "),
Text(" I am Jack "),
],
),
Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(" hello world "),
Text(" I am Jack "),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
textDirection: TextDirection.rtl,
children: <Widget>[
Text(" hello world "),
Text(" I am Jack "),
],
),
Row(
crossAxisAlignment: CrossAxisAlignment.start,
verticalDirection: VerticalDirection.up,
children: <Widget>[
Text(" hello world ", style: TextStyle(fontSize: 30.0),),
Text(" I am Jack "),
],
),
],
);
The practical result shown in FIG:
Explanation: First Row very simple, the default is centered; Second Row, since mainAxisSize value MainAxisSize.min, Row width equal to the width and two Text, so no alignment is sense, it will show from left to right; the third set textDirection Row value TextDirection.rtl, so the order of sub-assembly arranged from right to left, and this time left justified MainAxisAlignment.end expressed, the final result is displayed in the third row of FIG like; row fourth test is longitudinal alignment, since the two different sub-Text font, the height is different, we specify verticalDirection value VerticalDirection.up, i.e. from low to top arrangement, but this time the value CrossAxisAlignment.start crossAxisAlignment a bottom alignment.
The Column
the Column subassembly which may be arranged in the vertical direction. Row and the same parameters, except that the layout direction perpendicular to the longitudinal axis of the spindle opposite. · Defined as follows:
/**
* 列布局
*
* Column({
Key key,
//mainAxisAlignment主轴上的对齐方式
//center：将children放置在主轴的中心；
//end：将children放置在主轴的末尾；
//spaceAround：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾空白区域为children之间的1/2；
//spaceBetween：将主轴方向上的空白区域均分，使得children之间的空白区域相等，首尾没有空白区域；
//spaceEvenly：将主轴方向上的空白区域均分，使得children之间和收尾的空白区域相等；
//start：将children放置在主轴的起点；
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
//控住一行的高度，max：最大化主轴方向的可用空间；min：与max相反，是最小化主轴方向的可用空间；
MainAxisSize mainAxisSize = MainAxisSize.max,
//交叉轴上的对齐方式，baseline：children在交叉轴方向，根据baseline对齐，stretch：让children填满交叉轴方向，start,center,end.
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
TextDirection textDirection,//阿拉伯语系的兼容设置，一般无需处理
//定义了children摆放顺序,down：从top到bottom进行布局,up：从bottom到top进行布局
VerticalDirection verticalDirection = VerticalDirection.down,
TextBaseline textBaseline,
List<Widget> children = const <Widget>[],
})
*
*/
Example:
import 'package:flutter/material.dart';
class CenterColumnRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text("hi"),
Text("world"),
],
);
}
}
Run results as shown:
Explanation:
1. Since we did not specify the Column mainAxisSize, so the default value MainAxisSize.max, the Column occupy as much space in the vertical direction, in this example the screen height.
2. Because we specify crossAxisAlignment property CrossAxisAlignment.center, then the child in Column longitudinal axis direction (the horizontal direction) will be centered. Note that, in the horizontal direction is aligned with a boundary, the total width is the actual width of Column space, depending on the actual width of the maximum width subkey Widget. In the present embodiment, there are two sub Column Widget, while displaying "world" Text of the maximum width, the actual width compared with the width of Column Text ( "world"), so the centered Text ( "hi") appears in the Text ( "world") of the intermediate portion.
In fact, Row and Column will only take up as much space in the direction of the main shaft, and the vertical axis length depends on the length of their biggest child elements . If we want the present embodiment the two control text in the middle of the entire mobile phone screen alignment, we have two methods:
1. Column width is specified as the width of the screen; it is very simple, we can ConstrainedBox or SizedBox (we will later chapters devoted to both the Widget) to forcibly change the width limits, for example:
ConstrainedBox(
constraints: BoxConstraints(minWidth: double.infinity),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Text("hi"),
Text("world"),
],
),
);
The minWidth to double.infinity, the width can occupy as much space.
2. Center Widget;
Special circumstances
if nested inside Row Row, or Column Column nested inside another, then only on the outermost Row or Column will take up as much space, which Row or Column space occupied by the actual size, the following is to Column example shows:
Container(
color: Colors.green,
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.max, //有效，外层Colum高度为整个屏幕
children: <Widget>[
Container(
color: Colors.red,
child: Column(
mainAxisSize: MainAxisSize.max,//无效，内层Colum高度为实际高度
children: <Widget>[
Text("hello world "),
Text("I am Jack "),
],
),
)
],
),
),
);
Run results as shown:
If you want filled inside the outer Column Column, Expanded components may be used:
Expanded(
child: Container(
color: Colors.red,
child: Column(
mainAxisAlignment: MainAxisAlignment.center, //垂直方向居中对齐
children: <Widget>[
Text("hello world "),
Text("I am Jack "),
],
),
),
)
Run results as shown:
