Flutter學習之「相對佈局」

注：全部文章均不會詳細講解基礎widget的使用，你們能夠查看官方文檔，若有使用問題能夠在評論中提出。前期搭建環境工做還沒準備好的小夥伴，能夠個人 上一篇找官方文檔連接，跟着官方文檔就好了。

前言

從今天開始，我將記錄在學習Flutter 過程當中的遇到的一些具體問題，對照着Android中的實現用Flutter去解決這些問題，而且會對用到的widget講解一些本身的理解，方便你們更好的學習Flutter。

還有重要的一點要提，你們必定牢記於心，就像🐔你太美同樣😏：

Flutter中萬物皆widget！！！

Flutter中萬物皆widget！！！

Flutter中萬物皆widget！！！

重要的事情說三遍。

Action

倆個控件相對父佈局，居左和居右

咱們先來看一下大概的效果是什麼樣的：

藍色框框圈出來就是咱們要實現的佈局，這種兩個view分別居父佈局的左邊和右邊，你們應該很常見。在Android當中，一個RelativeLayout中放兩個TextView，而後給後面一個TextView設置layout_alignParentRight就能夠了(第一個TextView默認已經從左邊開始)，或者也有小夥伴說用ConstraintLayout也能夠實現，總之在Android中這類佈局很容易實現。

那咱們Flutter中應該怎麼實現？

準備

首先我先說一下Flutter中的基礎widget和Android中的View的區別，就拿Flutter中的Text和Android中的TextView作比較：

1. Text在Flutter中只負責文字的顯示，連設置寬高的屬性都沒有，更別說TextView的margin和padding屬性了(其餘基礎widget也是，包括Image，RaisedButton等等)。因此我理解的是Flutter中的這些基礎widget只負責本身的單一職責，好比Text，只負責文本的顯示。
2. 由於這些widget沒有移動本身位置的屬性，因此Flutter中就有了align，padding等等這些widget來給移動基礎widget的位置。
3. Text能夠經過textAlign來設置內部文字的位置，相似TextView的Gravity屬性。可是Text沒有相似Layout_Gravity屬性。

實現

好了，說了這麼多，咱們來看Flutter中的具體實現，Flutter中也有多種實現方式，下面咱們一一講解。

1. 經過Stack和Align實現

直接上代碼：

//Stack相似FrameLayout,子widget能夠經過父容器的四個角固定位置，子widget能夠重疊。
Stack(
   children: <Widget>[
     //能夠經過alignment屬性，設置其子widget與其對齊方式，默認center；
     //因此下面咱們分別給註冊和登陸設置了居左和居右
     Align(
       alignment: Alignment.centerLeft,
       child: Text(
         "註冊",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
     ),
     Align(
       alignment: Alignment.centerRight,
       child: Text(
         "忘記密碼",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
     ),
   ],
 ),

2. 經過Row和其mainAxisAlignment屬性

仍是直接上代碼：

//Row在水平方向佈局widget，相似Android中設置了horizontal的LinearLayout
Row(
  //Row是在水平方向佈局子widget，因此mainAxisAlignment是指子widget在水平方向上的位置。具體屬性下面具體講解
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
     Text(
         "註冊",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
      Text(
         "忘記密碼",
         style: TextStyle(color: Colors.red, fontSize: 20),
       ),
   ],
 ),

其實我纔開始作這個佈局的時候，我第一個想到的就是用Row，可是並無相似RelativeLayout那種子View能夠設置居左，居右的屬性。加上纔開始學的不仔細，就放棄這種方式了，用第一種方式實現了。不過通過後面的學習，發現Row實際上是能夠實現的。

你們其實看上面的代碼，比第一種實現方式代碼反而更簡單。相信你們也注意到重點了，就是這句代碼

mainAxisAlignment: MainAxisAlignment.spaceBetween

我纔開始只是簡單使用了MainAxisAlignment.start/center/end這幾個屬性，因此沒實現成功。後面我專門看了下剩下幾個屬性,以下：

// Place the free space evenly between the children.
MainAxisAlignment.spaceBetween
// Place the free space evenly between the children as well as half of that
// space before and after the first and last child.
MainAxisAlignment.spaceAround
// Place the free space evenly between the children as well as before and
// after the first and last child.
MainAxisAlignment.spaceEvenly

源碼註釋我放出來了，你們能夠先看一下，本身先理解一下。由於我以爲這幾個屬性仍是比較難理解的，因此準備在下一篇中詳細講解。

哦，忘記放出上面兩種實現效果了，來了，biubiu！

詳細代碼我也都上傳到gayhub上面了FlutterTour，這個項目我將會持續記錄全部實例代碼，歡迎你們動動小手，給個star吧😘😘😘。