今天来讲讲Row和Column，它主要是用来布局的用的，参照web的Flex布局。
首先，我们先来自定义个图标的widget,
class IconBadge extends StatelessWidget {
final IconData icon;
final double size;
IconBadge(this.icon, {this.size = 32.0});
@override
Widget build(BuildContext context) {
return Container(
child: Icon(
icon,
size: size,
color: Colors.white,
),
width: size + 60,
height: size + 60,
color: Colors.lightGreen,
);
}
}
如果上面的代码看不懂，建议回去翻下前面的文章。
然后我们再来使用Row:
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
children: <Widget>[ // 一行上面有子元素数组
IconBadge(Icons.people),
IconBadge(Icons.perm_data_setting),
IconBadge(Icons.person_pin_circle),
],
);
}
}
显示如下:
row.png
如果要竖排显示，直接将Row替换即可。
在Row & Column里面有个属性叫做mainAxisAlignment，它的意思是主轴，主要用来对齐用的。那什么叫主轴呢？ 在Row中的主轴就是x轴，在Column中就是y轴。对上面代码做下修改:
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //两边对齐
children: <Widget>[
IconBadge(Icons.people),
IconBadge(Icons.perm_data_setting),
IconBadge(Icons.person_pin_circle),
],
);
}
}
展示效果如下:
mainAxis.png
有了主轴，自然还有交叉轴，那就是crossAxisAlignment。交叉轴就是与主轴相垂直的那个轴。
class RowDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch, // 交叉轴拉伸
children: <Widget>[
IconBadge(Icons.people),
IconBadge(Icons.perm_data_setting),
IconBadge(Icons.person_pin_circle),
],
);
}
}
效果:
cross.png
