iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 5
1
Mobile Development

iOS Developer Learning Flutter系列 第 5

iOS Developer Learning Flutter. Lesson4 畫面佈局

我認為學習前端技術的第一步
都是先了解如何layout
再去學習各個Components的特性
接著再逐漸擴展到其他功能(例如打API之類的)
而Flutter的layout跟iOS不太一樣
我感覺以前像是決定要把View放在哪裏, 現在像是要把畫布分割區塊
接下來就介紹幾種最常用的佈局

1. Column/Row(繼承自Flex)

就是以前的UIStackView☘️☘️☘️
也是Android的linear layout
只不過Row是水平排列, Column是垂直排列
我老是覺得應該相反= =
(是不是cellForRow的影響太深了XD)

  • 首先介紹mainAxisSize
    代表在主軸的高/寬度,
    如果是max; 代表跟父widget一樣大,
    如果是min, 代表跟子widget一樣大;
    所以當max時(預設), 下面的mainAxisAlignment才有意義
  • mainAxisAlignment 跟 crossAxisAlignment 屬性
    決定了主軸跟交軸的對齊方式
    (但是要注意Dart的enum不能直接 .center, 必須顯式指定型別MainAxisAlignment.center)
  • textDirection 跟 verticalDirection 的方向
    是預設左到右(中文環境裡), 上到下

2. Expanded(繼承自Flexible)

通常在Column/Row內使用
可以將子widget所佔空間彈性延伸
有個flex屬性可以決定要佔主軸剩餘空間的多少比例
預設為1, 就有點像我們以前要跟SuperView上下左右貼齊的感覺☘️☘️☘️
如下圖四個widget的flex為1, 2, 3, 4

3. Stack(繼承自MultiChildRenderObjectWidget)

這個反而不是以前的StackView喔!!
而是真的像疊盤子那樣的stack
然後它竟然還有一個屬性叫做overflow XDDDDD
Overflow.clip時(預設),超出部分會被剪裁,Overflow.visible則不會

然後重疊位置與大小, 分為子widget有無用Positioned包起來
若無就交給alignment 跟 fit 去決定
例如下圖就是預設為對齊左上, 大小不延伸成跟StackView一樣

若用Positioned
就可以指定跟StackView的上下左右距離
需注意上下高 跟 左右寬, 兩組屬性中
每組中最多只能指定其中兩個屬性, 剩下一個Flutter幫您算
若同時指定三個會報錯

最後,children裡index越後面的widget就在越上面

4. Widget的分類

  1. LeafRenderObjectWidget = 沒有子Widget的, 例如: Image
  2. SingleChildRenderObjectWidget = 只有一個子Widget的, 例如: DecoratedBox
  3. MultiChildRenderObjectWidget = 可以很多子Widget的, 例如: 上面提到的Stack

參考連結


本集內容Android版請見:iOS Developer Learning Android. Lesson 07

下集預告:容器元件

最後提供一下github.com/mark33699/IDLF


上一篇
iOS Developer Learning Flutter. Lesson3 頁面跳轉
下一篇
iOS Developer Learning Flutter. Lesson5 容器元件
系列文
iOS Developer Learning Flutter30

尚未有邦友留言

立即登入留言