界面一致性在Android 和 iOS上显示效果一致
设置居中
alignment: Alignment(0, 0),//相对布局
container 添加Center()
布局
- Row 横向排列 ：主轴，交叉轴
- Column 纵向排列：主轴，交叉轴
- Stack 层级排列,最大的在最下面
1.横向布局Row(X轴)
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0, 0),
child: Row(
children: <Widget>[
Container(
child: Icon(
Icons.add,
size: 60,
),
color: Colors.red),
Container(
child: Icon(
Icons.ac_unit,
size: 60,
),
color: Colors.blue),
Container(
child: Icon(
Icons.access_alarm,
size: 60,
),
color: Colors.green),
Container(
child: Icon(
Icons.access_time,
size: 60,
),
color: Colors.yellow)
],
),
);
}
}
效果图
image
2.竖向布局Column(Y轴)
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0, 0),
child: Column(
children: <Widget>[
Container(
child: Icon(
Icons.add,
size: 60,
),
color: Colors.red),
Container(
child: Icon(
Icons.ac_unit,
size: 60,
),
color: Colors.blue),
Container(
child: Icon(
Icons.access_alarm,
size: 60,
),
color: Colors.green),
Container(
child: Icon(
Icons.access_time,
size: 60,
),
color: Colors.yellow)
],
),
);
}
}
效果图
image
3.Stack 重叠布局(层级布局Z轴)
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0, 0),
child: Stack(
children: <Widget>[
Container(
child: Icon(
Icons.add,
size: 160,
),
color: Colors.red),
Container(
child: Icon(
Icons.ac_unit,
size: 120,
),
color: Colors.blue),
Container(
child: Icon(
Icons.access_alarm,
size: 80,
),
color: Colors.green),
Container(
child: Icon(
Icons.access_time,
size: 40,
),
color: Colors.yellow)
],
),
);
}
}
效果图
image
4.textBaseline 以文字的底部对齐
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,//主轴方向居中显示(水平方向)
crossAxisAlignment: CrossAxisAlignment.baseline,//交叉轴居中显示(竖直方向)
textBaseline: TextBaseline.alphabetic,//针对文本,以文字的底部对齐
children: <Widget>[
Container(
child: Text(
'你好',style: TextStyle(fontSize: 15),
),
color: Colors.red,
height: 80,
),
Container(
child: Text(
'哎呦',style: TextStyle(fontSize: 30),
),
color: Colors.blue,
height: 80,
),
Container(
child: Text(
'哎哟嘿',style: TextStyle(fontSize: 60),
),
color: Colors.green,
height: 80,
),
],
),
);
}
}
效果图：
image
5.Expanded 自动填充：子部件随着父部件的大小自己填充
- column 布局 设置高度无意义
- row 布局 设置宽度无意义
class LayOutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.white,
alignment: Alignment(0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //主轴方向居中显示(水平方向)
crossAxisAlignment: CrossAxisAlignment.baseline, //交叉轴居中显示(竖直方向)
textBaseline: TextBaseline.alphabetic, //针对文本,以文字的底部对齐
children: <Widget>[
Expanded(
//填充布局
child: Container(
child: Text(
'你好',
style: TextStyle(fontSize: 15),
),
color: Colors.red,
height: 80,
),
),
Expanded(
//填充布局
child: Container(
child: Text(
'哎呦',
style: TextStyle(fontSize: 30),
),
color: Colors.blue,
height: 80,
),
),
Expanded(
//填充布局
child: Container(
child: Text(
'哎哟嘿',
style: TextStyle(fontSize: 60),
),
color: Colors.green,
height: 80,
),
),
],
),
);
}
}
效果图：
image
