假設你已經掌握了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,
),
),
],
),
),
);
}
}
複製程式碼程式碼都是參考官網英文文件擼的，但是本人是英語渣，所以如果有不對的地方，歡迎大家指正！