flutter 布局Row、Column、mainAxisAlignment、crossAxisAlignment用法

假设你已经掌握了flutter的一些基础知识，比如环境搭建，简单的dart语法，及flutter组件化思想。那么你适合阅读本篇教程，本教程演示一些flutter中的flex用法的简单示例.

在不懂height: 170.0,width:100.0如何适配不同分辨率的时候，只能用flex搞事情，所以咱看看flex如何在flutter中搞事情。

先看效果图：

分析一下需求：

整个布局最外层是一个Row，左边是一个Column里面再嵌套一个Row，代码实现如下：

import 'package:flutter/material.dart';
class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){   
    return new Center(
      child: new Row(
        children: <Widget>[
           new Column(
              children: <Widget>[
                new Text(
                  "为什么说Flutter是革命性的1",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),
                ),   
                new Row(
                  children: <Widget>[
                    new Text(
                      '央视网',
                    ), 
                    new Text(
                        '2018-03-11',
                    ), 
                  ],
                ),               
              ],
            ),
            new Image.asset(
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
        ],
      ),    
    );
  }
}

这只是纯组件代码，还没有添加任何样式

最外层的Row，有2个子组件,它们主轴为水平方向，起点为左端，和flex的flex-direction: row同样效果,子组件的对齐方式为两端对齐,flex代码为 justify-content： space-between。

然后左侧布局为Column，主轴方向为垂直方向，两个子组件的布局方式为两端对齐，flex代码为： justify-content：space-between。

左侧底部同理。在flutter如果实现呢，代码如下：

import 'package:flutter/material.dart';

class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){

   return new Center(
    child:new Container(
      height: 120.0,
      padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding
      decoration: new BoxDecoration(
        border:new Border.all(//新手建议给每一个组件写一个border
          color:const Color(0xff6d9eeb),
        )
      ),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
        children: <Widget>[
          new Expanded(
            flex:2,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点
              mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件在主轴的排列方式为两端对齐
              children: <Widget>[
                new Container(
                  padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding
                  decoration: new BoxDecoration(
                    border:new Border.all(
                        color:const Color(0xff6d999b),
                    )
                  ),
                  child:new Text(
                  "为什么说Flutter是革命性的",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),

                  ), 
                ),
                 new Container(
                  padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                  decoration: new BoxDecoration(
                    border:new Border.all(
                        color:const Color(0xff6d999b),
                    )
                  ),
                  child:new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件在主轴的排列方式为两端对齐
                    children: <Widget>[
                      new Text(
                        '央视网',
                      ), 
                       new Text(
                        '2018-03-11',
                      ), 
                    ],
                  )

                ),

              ],
            ),
          ),
          new Expanded(
            flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据1/3
            child: new Image.asset(//本地图片加载，需在pubspec.yaml配置
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
          ),
        ],
      ),
    ),
   );
  }
}

在上面代码中，还添加了一些其他样式，并且给每一个组件都加了border，这样便于新手布局。我们把多余的代码删掉然后稍作改进，完整代码如下：

import 'package:flutter/material.dart';

class FluterFlex extends StatelessWidget {
  @override
  Widget  build(BuildContext context){

   return new Center(
    child:new Container(
      height: 120.0,
      padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加padding
      decoration: new BoxDecoration(
        border:new Border(
          bottom: new BorderSide(width: 1.0,color:const Color(0xff999999))
          // color:const Color(0xff6d9eeb),
        )
      ),
      child: new Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
        children: <Widget>[
          new Expanded(
            flex:2,//这个item占据剩余空间的份数，因为总数为3，所以此处占据2/3
            child: new Column(
              crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点
              mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件的排列方式为主轴两端对齐
              children: <Widget>[
                new Container(
                  padding:new EdgeInsets.only(top:15.0),//标题写一个top-padding
                  child:new Text(
                  "为什么说Flutter是革命性的",
                  style: new TextStyle(
                    fontSize: 18.0
                  ),
                  ), 
                ),
                 new Container(
                  padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                  child:new Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐
                    children: <Widget>[
                      new Text(
                        '央视网',
                      ), 
                       new Text(
                        '2018-03-11',
                      ), 
                    ],
                  )

                ),

              ],
            ),
          ),

          new Expanded(
            flex:1,//这个item占据剩余空间的份数，因为总数为3，所以此处占据1/3
            child: new Image.asset(//本地图片加载，需在pubspec.yaml配置
              'images/head.jpg',
              height: 100.0,
              fit: BoxFit.cover,
              ),
          ),
        ],
      ),
    ),  
   );