8. Flutter——Padding、Row、Column 组件

1. Padding（间距）

• 属性:

属性	说明
padding	padding值,EdgeInsetss 设置填充的值
child	子组件

• 代码:

classLayoutDemoextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		return Padding( 
			padding:EdgeInsets.fromLTRB(0,0,10,0), 
			child:GridView.count(
				crossAxisCount:2, 
				childAspectRatio:1.5, 
				children:<Widget>[ 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0), 
						child:Image.network('url', fit:BoxFit.cover), 
					), 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0),
						child:Image.network('url', fit:BoxFit.cover), 
					), 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0),
						child:Image.network('url', fit:BoxFit.cover), 
					), 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0),
						child:Image.network('url', fit:BoxFit.cover), 
					), 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0),
						child:Image.network('url', fit:BoxFit.cover), 
					), 
					Padding( 
						padding:EdgeInsets.fromLTRB(10,10,0,0),
						child:Image.network('url', fit:BoxFit.cover), 
					), 
				], 
			), 
		); 
	} 
}

---

2. Row（水平布局组件）

• 属性：

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

• 代码：

voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){  
		return MaterialApp( 
			home:Scaffold(
				appBar:AppBar(title:Text('FlutterDemo')), 
				body:LayoutDemo(), 
		)); 
	} 
} 

classLayoutDemoextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		return Container( 
			height:700, 
			width:500, 
			color:Colors.black26, 
			child:Row( 
				crossAxisAlignment:CrossAxisAlignment.center,
				mainAxisAlignment:MainAxisAlignment.spaceEvenly, 
				children:<Widget>[ 
						IconContainer(Icons.home,color:Colors.red),
						IconContainer(Icons.search,color:Colors.blue),
						IconContainer(Icons.send,color:Colors.orange), 
					], 
				), 
			);
		}
}

classIconContainerextendsStatelessWidget{
	double size; 
	IconData icon; 
	Color color;
	IconContainer(this.icon,{this.size,this.color=Colors.blue}){ 
		this.size=32.0; 
	} 
	@override Widgetbuild(BuildContextcontext){ 
		 return Container( 
		 	width:this.size+60, 
		 	height:this.size+60,
			color:this.color,
			child:Center(child:Icon(this.icon,color:Colors.white,size:this.size)) 
			); 
		}
}

---

3. Column（垂直布局组件）

• 属性：

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

• 代码：

voidmain()=>runApp(MyApp());

classMyAppextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		returnMaterialApp( 
			home:Scaffold( 
				appBar:AppBar(title:Text('FlutterDemo')), 
				body:LayoutDemo(), 
			)); 
		} 
} 

classLayoutDemoextendsStatelessWidget{ 
	@override 
	Widgetbuild(BuildContextcontext){ 
		return Container( 
			height:700, 
			width:500, 
			color:Colors.black26, 
			child:Column( 
				crossAxisAlignment:CrossAxisAlignment.center,
				mainAxisAlignment:MainAxisAlignment.spaceEvenly,  
				children:<Widget>[ 
					IconContainer(Icons.home,color:Colors.red),
					IconContainer(Icons.search,color:Colors.blue),
					IconContainer(Icons.send,color:Colors.orange), 
				],
 		), 
 	);
	}
}

classIconContainerextendsStatelessWidget{
	double size; 
	IconData icon; 
	Color color;
	IconContainer(this.icon,{this.size,this.color=Colors.blue}){
		 this.size=32.0; 
	} 
	@override Widgetbuild(BuildContextcontext){  
		return Container( 
		width:this.size+60, 
		height:this.size+60, 
		color:this.color, 
		child:Center(child:Icon(this.icon,color:Colors.white,size:this.size)) 
		); 
	}
}