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))
);
}
}