10. Flutter——Wrap页面布局组件

1. Wrap组件

• Wrap 可以实现流布局，单列的 Wrap 则跟 Row 无差别。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空 间不足时，就会向 crossAxis 上去扩展显示。

• 属性:

属性	说明
direction	主轴的方向，默认水平
alignment	主轴的对其方式
spacing	主轴方向上的间距
textDirection	文本方向
verticalDirection	定义了 children 摆放顺序，默认是 down，见 Flex 相关属性介绍。
runAlignment	run 的对齐方式。run 可以理解为新的行或者 列，如果是水平方向布局的话， run 可以理解 为新的一行
runSpacing	run 的间距

• 代码：

classMyAppextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		 returnMaterialApp( 
		 	home:Scaffold(
		 	appBar:AppBar(
		 		title:Text('FlutterDemo')), 
		 		body:LayoutDemo(), 
		 	)); 
		 } 
	} 
classLayoutDemoextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		returnWrap( 
			spacing:10, 
			runSpacing:10, 
			alignment:WrapAlignment.spaceEvenly,
			children:<Widget>[ 
				MyButton("第 1"), 
				MyButton("第 2"), 
				MyButton("第 3"), 
				MyButton("第 4"), 
				MyButton("第 5"), 
				MyButton("第 6第 1 "), 
				MyButton("第 7"), 
				MyButton("第 8第 9 "), 
				MyButton("第 9"), 
				MyButton("第 10"), 
				MyButton("第 11第 999"), 
			],
		);
	}
}

classMyButtonextendsStatelessWidget{
	finalStringtext;
	constMyButton(this.text,{Keykey}):super(key:key);
	@override 
	Widgetbuild(BuildContextcontext){ 
			returnRaisedButton(
				 child:Text(this.text),
				 textColor:Theme.of(context).accentColor,
				 onPressed:(){ }, 
			); 
	  } 
}