淺嘗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,
              ),
          ),
        ],
      ),
    ),  
   );
  }
}


複製代碼

代碼都是參考官網英文文檔擼的，可是本人是英語渣，因此若是有不對的地方，歡迎你們指正！