浅尝flutter中的flex布局

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

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

先看效果图&＃xff1a;

分析一下需求&＃xff1a;

整个布局最外层是一个Row&＃xff0c;左边是一个Column里面再嵌套一个Row&＃xff0c;代码实现如下&＃xff1a;

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


这只是纯组件代码&＃xff0c;还没有添加任何样式

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

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

左侧底部同理。在flutter如果实现呢&＃xff0c;代码如下&＃xff1a;


import &＃39;package:flutter/material.dart&＃39;;class FluterFlex extends StatelessWidget {&＃64;overrideWidget build(BuildContext context){return new Center(child:new Container(height: 120.0,padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加paddingdecoration: new BoxDecoration(border:new Border.all(//新手建议给每一个组件写一个bordercolor:const Color(0xff6d9eeb),)),child: new Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,//子组件的排列方式为主轴两端对齐children: [new Expanded(flex:2,//这个item占据剩余空间的份数&＃xff0c;因为总数为3&＃xff0c;所以此处占据2/3child: new Column(crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件在主轴的排列方式为两端对齐children: [new Container(padding:new EdgeInsets.only(top:15.0),//标题写一个top-paddingdecoration: 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: [new Text(&＃39;央视网&＃39;,), new Text(&＃39;2018-03-11&＃39;,), ],)),],),),new Expanded(flex:1,//这个item占据剩余空间的份数&＃xff0c;因为总数为3&＃xff0c;所以此处占据1/3child: new Image.asset(//本地图片加载&＃xff0c;需在pubspec.yaml配置&＃39;images/head.jpg&＃39;,height: 100.0,fit: BoxFit.cover,),),],),),);}
}

效果如图&＃xff1a;

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


import &＃39;package:flutter/material.dart&＃39;;class FluterFlex extends StatelessWidget {&＃64;overrideWidget build(BuildContext context){return new Center(child:new Container(height: 120.0,padding:new EdgeInsets.only(left:20.0,right:20.0),//给最外层添加paddingdecoration: 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: [new Expanded(flex:2,//这个item占据剩余空间的份数&＃xff0c;因为总数为3&＃xff0c;所以此处占据2/3child: new Column(crossAxisAlignment: CrossAxisAlignment.start,//子组件的在交叉轴的对齐方式为起点mainAxisAlignment:MainAxisAlignment.spaceBetween ,//子组件的排列方式为主轴两端对齐children: [new Container(padding:new EdgeInsets.only(top:15.0),//标题写一个top-paddingchild: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: [new Text(&＃39;央视网&＃39;,), new Text(&＃39;2018-03-11&＃39;,), ],)),],),),new Expanded(flex:1,//这个item占据剩余空间的份数&＃xff0c;因为总数为3&＃xff0c;所以此处占据1/3child: new Image.asset(//本地图片加载&＃xff0c;需在pubspec.yaml配置&＃39;images/head.jpg&＃39;,height: 100.0,fit: BoxFit.cover,),),],),), );}
}

代码都是参考官网英文文档撸的&＃xff0c;但是本人是英语渣&＃xff0c;所以如果有不对的地方&＃xff0c;欢迎大家指正&＃xff01;