Flutter - Row & Column

今天来讲讲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: [  // 一行上面有子元素数组
        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: [
        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: [
        IconBadge(Icons.people),
        IconBadge(Icons.perm_data_setting),
        IconBadge(Icons.person_pin_circle),
      ],
    );
  }
}

效果:

cross.png