Row，Column布局使用

先什么属性都不设置，看看默认显示效果

body: Container(
        color: Colors.teal,
        child: Row(
          children: [
            IconButton(icon: Icon(Icons.home), onPressed: () {}),
            IconButton(icon: Icon(Icons.email), onPressed: () {}),
            IconButton(icon: Icon(Icons.camera), onPressed: () {}),
            IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
          ],
        ),
      )

显示如下：

defult.png

1. mainAxisSize：决定主轴方向的尺寸，有两个取值 MainAxisSize.max和MainAxisSize.min,默认是 MainAxisSize.max.我们给row设置如下代码，看看显示效果

mainAxisSize: MainAxisSize.min,

显示如下：

min.png

2. mainAxisAlignment：主轴方向上内容的对齐方式，取值有start，end，center，spaceEvenly，spaceBetween，spaceAround六种。这里我们主要看下后面三种如何展示。

a. mainAxisAlignment: MainAxisAlignment.spaceEvenly,// 分布均匀

1.png

b. mainAxisAlignment: MainAxisAlignment.spaceAround

3.png

c. mainAxisAlignment: MainAxisAlignment.spaceBetween,

2.png

3.crossAxisAlignment：副轴方向上子控件的对齐方式

CrossAxisAlignment枚举值有如下几种：

• baseline：在交叉轴方向，使得children的baseline对齐；
• center：children在交叉轴上居中展示；
• end：children在交叉轴上末尾展示；
• start：children在交叉轴上起点处展示；
• stretch：让children填满交叉轴方向；
  默认取值是center，我们演示 crossAxisAlignment: CrossAxisAlignment.end的展示效果：

 body: Container(
        height: 100,
        color: Colors.teal,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.end,
          children: [
            IconButton(icon: Icon(Icons.home), onPressed: () {}),
            IconButton(icon: Icon(Icons.email), onPressed: () {}),
            IconButton(icon: Icon(Icons.camera), onPressed: () {}),
            IconButton(icon: Icon(Icons.account_circle), onPressed: () {}),
          ],
        ),
      ),

展示如下：

4.png

参阅：

Q吹个大气球Q