布局方式.

线性布局

• Flutter中通过Row和Column来实现线性布局
• 线性布局包含两个方向,一个是横向一个是纵向

横向线性布局

body: Row(
crossAxisAlignment: CrossAxisAligment. start,
children: <Widget>[
	Container(
		width: 200,
		height: 300,
		color: Colors. red.
	).
	Container(
		width: 200,
		height: 400,
		color: Colors. blue,
	)
]

纵向线性布局

body: Column(
crossAxisAlignment: CrossAxisAligment. start,
children: <Widget>[
	Container(
		width: 200,
		height: 300,
		color: Colors. red.
	).
	Container(
		width: 200,
		height: 400,
		color: Colors. blue,
	)
]

textDirection：表示水平方向子widget的布局顺序(是从左往右还是从右往左)，默认为系统当前Locale环境的文本方向(如中文、英语都是从左往右，而阿拉伯语是从右往左)。
主轴方向: Row即为水平方向，Column为垂直方向
mainAxisAlignment 主轴方向，对child起作用
center：将children放置在主轴的中心
start：将children放置在主轴的起点
end：将children放置在主轴的末尾
spaceAround：将主轴方向上的空白区域均分，使children之间的空白区域相等，但是首尾child的靠边间距为空白区域为1/2
spaceBetween：将主轴方向上的空白区域均分，使children之间的空白区域相等，首尾child靠边没有间隙
spaceEvenly：将主轴方向上的空白区域均分，使得children之间的空白区域相等，包括首尾child
mainAxisSize max表示尽可能占多的控件，min会导致控件聚拢在一起
crossAxisAlignment 交叉轴方向，对child起作用
baseline：使children baseline对齐
center：children在交叉轴上居中展示
end：children在交叉轴上末尾展示
start：children在交叉轴上起点处展示
stretch：让children填满交叉轴方向
verticalDirection ，child的放置顺序
VerticalDirection.down，在Row中就是从左边到右边，Column代表从顶部到底部
VerticalDirection.up，相反

弹性布局

• 弹性布局是一种允许子widget按照一定比例来分配父容器空间的布局方式，如果你知道了它的主轴方向，那就可以用Row或Column了，一般情况下，可以用Flex的地方都可以用Row或者Column一起使用，通常配合Expanded Widget来使用，同样Expanded也不能脱离Flex单独创建。

body: Flex(
	direction: Axis. horizontal,//horizontal改成vertical,就是垂直方向了
	children: <Widget>[
		Container(
			width: 50,
			height:300,
			color:Color.black
		),//这个标识黑颜色固定宽度为50,剩下的空间再给Expanded按份数分
		Expanded(      //一个Expanded,每一个都是一份
			flex: 1,
			child: Container(
				height: 300,
				color: Colors. red,
			)
		),
		Expanded(
			flex: 1,
			child: Container(
				height: 300,
				color: Colors. blue,
			)
		),
		Expanded(
			flex: 1,//如果这边改成2的话,就是他站1/2的位置
			child: Container(
				height: 300,
				color: Colors. yellow,
			)
		),
	]

定位

• flutter中的定位和web中的绝对定位非常像

body: SizedBox(
	height: 400,
	width: 400,
	child: Stack(
	alignment:Alignment.topRight,//alignment可以设置左对齐或右对齐
		children: <Widget>[
			Positioned(
				left: 15,
				right:20,
				top: 30,
				child: Container(
					heipht: 100,
					width: 100,
					color: Colors. red

				),
			),
			Positioned(
				right: 100,
				top: 100,
				child: Container(
					width: 200,
					height: 200,
					color: Colors. blue
				),
			),
		]
	),
)
		

流式布局

• 流式布局（Liquid）的特点（也叫"Fluid") 是页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。栅栏系统（网格系统），用户标签等。在Flutter中主要有Wrap和Flow两种Widget实现。
  

流式布局中的属性

• spacing：主轴方向子widget的间距
• runSpacing：纵轴方向的间距
• runAlignment：纵轴方向的对齐方式