假设你已经掌握了flutter的一些基础知识，比如环境搭建，简单的dart语法，及flutter组件化思想。那么你适合阅读本篇教程，本教程演示一些flutter中的flex用法的简单示例.
在不懂height: 170.0,width:100.0如何适配不同分辨率的时候，只能用flex搞事情，所以咱看看flex如何在flutter中搞事情。
先看效果图：
image
分析一下需求：
image
整个布局最外层是一个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,
),
),
],
),
),
);
}
}
效果如图：
image
在上面代码中，还添加了一些其他样式，并且给每一个组件都加了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,
),
),
],
),
),
);
}
}
代码都是参考官网英文文档撸的，但是本人是英语渣，所以如果有不对的地方，欢迎大家指正！
