Flutter布局总结（二）：垂直或水平放置多个widget

使用行（Row）水平排列widget，使用列（Column）垂直排列widget。在行或列中嵌套行或列实现复杂的布局。如下图所示：

此布局按行排列。该行包含两个子布局，左侧一列和右侧的图片

---

• 对于行（Row）来说，主轴是水平方向，横轴是垂直方向。对于列（Column）来说，主轴是垂直方向，横轴是水平方向
  
• 使用mainAxisAlignment和crossAxisAlignment属性控制行或列对齐（使用
  MainAxisAlignment和CrossAxisAlignment类中的常量）
  如下图：3个图像都是100像素，屏幕宽度大于300像素，可以设置主轴对齐方式为spaceEvently，它会在每个图像之前和之后分配空闲的水平空间
  
  代码如下：
  
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Center(
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Image.asset('images/pic1.jpg'),


• 如果要widget按比例占据空间大小，可以将widget放到ExpandedWidget中，ExpandedWidget的flex属性，用于确定widget的弹性系数，默认为1
  如下图：创建一个由3个widget组成的行，其中中间widget的宽度是其他两个widget的两倍，将中间widget的弹性系数设置为2
  
  代码如下：

  class ExpandedState extends State<ExpandedS> {
    @override
    Widget build(BuildContext context) {
      // TODO: implement build
      return new Scaffold(
        appBar: new AppBar(title: new Text('ExpandedTest')),
        body: new Center(
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              new Expanded(child: new Image.asset('images/1.jpg')),
              new Expanded(child: new Image.asset('images/2.jpg'), flex: 2,),
              new Expanded(child: new Image.asset('images/3.jpg'))
            ],
  
          ),
        ),
      );
    }
  }

• 默认情况下，行或列沿着其主轴会占用尽可能多的空间，如果要将widget聚集在一起，可以将mainAxisSize设置为MainAxisSize.min
  如下图，将五角星挨个排列，而不是分散占成一行
  

上文参考https://flutterchina.club/tutorials/layout/#approach

---

注意

pubspec.yaml文件中添加资源代码格式要正确
如下

下面设置是不正确的，图片不能显示