假設(shè)你已經(jīng)掌握了flutter的一些基礎(chǔ)知識，比如環(huán)境搭建，簡單的dart語法吻谋，及flutter組件化思想巡社。那么你適合閱讀本篇教程，本教程演示一些flutter中的flex用法的簡單示例.
在不懂height: 170.0,width:100.0如何適配不同分辨率的時候奋构，只能用flex搞事情壳影，所以咱看看flex如何在flutter中搞事情。
先看效果圖：
效果圖
分析一下需求：
分析需求
整個布局最外層是一個Row弥臼，左邊是一個Column里面再嵌套一個Row宴咧，代碼實現(xiàn)如下：
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(
'央視網(wǎng)',
),
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纳猪。
然后左側(cè)布局為Column氧卧，主軸方向為垂直方向，兩個子組件的布局方式為兩端對齊氏堤，flex代碼為： justify-content：space-between沙绝。
左側(cè)底部同理。在flutter如果實現(xiàn)呢鼠锈，代碼如下：
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占據(jù)剩余空間的份數(shù)闪檬，因為總數(shù)為3，所以此處占據(jù)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(
'央視網(wǎng)',
),
new Text(
'2018-03-11',
),
],
)
),
],
),
),
new Expanded(
flex:1,//這個item占據(jù)剩余空間的份數(shù)脚祟，因為總數(shù)為3谬以，所以此處占據(jù)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占據(jù)剩余空間的份數(shù)，因為總數(shù)為3娃循，所以此處占據(jù)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(
'央視網(wǎng)',
),
new Text(
'2018-03-11',
),
],
)
),
],
),
),
new Expanded(
flex:1,//這個item占據(jù)剩余空間的份數(shù)炕檩，因為總數(shù)為3，所以此處占據(jù)1/3
child: new Image.asset(//本地圖片加載，需在pubspec.yaml配置
'images/head.jpg',
height: 100.0,
fit: BoxFit.cover,
),
),
],
),
),
);
}
}
代碼都是參考官網(wǎng)英文文檔擼的笛质，但是本人是英語渣泉沾，所以如果有不對的地方，歡迎大家指正妇押！
