Flutter學習之”相對佈局“

街道書記發表於2019-08-03
Flutter

注：所有文章均不會詳細講解基礎widget的使用，大家可以檢視官方文件，如有使用問題可以在評論中提出。前期搭建環境工作還沒準備好的小夥伴，可以在我的上一篇找官方文件連結，跟著官方文件就行了。

Flutter學習之”相對佈局“

前言

從今天開始，我將記錄在學習Flutter過程中的遇到的一些具體問題，對照著Android中的實現用Flutter去解決這些問題，並且會對用到的widget講解一些自己的理解，方便大家更好的學習Flutter。

還有重要的一點要提，大家一定牢記於心，就像?你太美一樣?：

Flutter中萬物皆widget！！！

Flutter中萬物皆widget！！！

Flutter中萬物皆widget！！！

重要的事情說三遍。

Action

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

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

login_page.png

藍色框框圈出來就是我們要實現的佈局，這種兩個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！

result.png

詳細程式碼我也都上傳到gayhub上面了FlutterTour，這個專案我將會持續記錄所有例項程式碼，歡迎大家動動小手，給個star吧???。

相關文章