内边距组件:
设置组件的内边距
Padding(
padding:EdgeInsets.all(n),
child:组件
)
水平组件:
子组件全都水平排列
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 水平方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, 垂直方向布局方式
children: <Widget>[...] //Lisi<Widget>类型的容器
)
垂直组件:
子组件全都垂直排列
内部不能放置ListView组件
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, 垂直方向的布局方式,spaceEvenly元素与元素之间,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, 水平方向布局方式
children: <Widget>[...] //Lisi<Widget>类型的容器
)
自适应组件:
类似flex布局中设置flex的值使得元素按占比布局
Expanded(
flex:n, 子组件占父元素的比例
child:组件
)
自适应占据控件组件Spacer()
可以用于Column等组件中,用于按照自适应组件的方式占据空间
Spacer(); 内部就是返回一个Expanded的SizedBox的空间布局
Spacer(flex:n);
代码示例:
import "package:flutter/material.dart";
void main()
{
runApp(App());
}
class App extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home:Scaffold(appBar: AppBar(title: Text("hh")),
body:Home4()
)
,);
}
}
class Home extends StatelessWidget{
List<Widget> _get()
{
List<Widget> list=new List();
for(int i=0;i<10;i++)
{
list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return GridView.count(
crossAxisCount: 2,
children:<Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10,10,10,20),
child:Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue) ,
),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,),
],
);
}
}
class Home2 extends StatelessWidget{
List<Widget> _get()
{
List<Widget> list=new List();
for(int i=0;i<10;i++)
{
list.add(Container(height:400.0,child: Text("拉拉"),alignment: Alignment.center,color: Colors.blue,));
}
return list;
}
@override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //水平方向的布局方式,spaceEvenly元素与元素之前,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, //垂直方向布局方式
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
],
);
}
}
class Home3 extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //垂直方向的布局方式,spaceEvenly元素与元素之前,首尾元素与父容器的距离均匀分配
crossAxisAlignment: CrossAxisAlignment.center, //水平方向布局方式
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
],
);
}
}
class Home4 extends StatelessWidget{
@override
Widget build(BuildContext context) {
// TODO: implement build
return Row(
children: <Widget>[
Expanded(
flex:1,
child:Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
),
Expanded(
flex:2,
child:Container(
height: 100.0,
width: 100.0,
color:Colors.orange,
child: Icon(Icons.home,size:32,color:Colors.white),
),
),
Container(
height: 100.0,
width: 100.0,
color:Colors.blue,
child: Icon(Icons.home,size:32,color:Colors.white),
),
],
);
}
}