浅尝flutter中的flex布局

假设你已经掌握了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,
              ),
          ),
        ],
      ),
    ),  
   );
  }
}


复制代码

代码都是参考官网英文文档撸的，可是本人是英语渣，因此若是有不对的地方，欢迎你们指正！