前言

此文其實是我上一年這篇诉苦的延伸Flutter 這個MainAxisAlignment沒有我要的對齊办法！

我時常覺得Flex的現有的線性排版/對齊办法也便是 MainAxisAlignment不夠用時常需求往children裡添加輔助的Widget，如Spacer() 或是有尺寸的 SizedBox()Container()之類的，再或者需求往Flex()套同方向的Flex().

已然改源碼不方便，那我直接封裝成package不就好了！！！

more_main_axis_alignment

• pubdev
• GitHub

於是我拷貝了Flutter裡的Flex，寫了MoreFlex、MoreColumn、MoreRow，供给更多的MainAxisAlignment，簡單暴力的把這個枚舉取名為MoreMainAxisAlignment。

MoreFlex、MoreColumn、MoreRow的用法和Flex、Column、Row一模一樣（畢竟是copy來的），只是針對某些特別的MoreMainAxisAlignment需求供给額外的參數。

MoreMainAxisAlignment

不只供给了舊有的6種，我額外添加了11種，希望以後可以越加越多，即使很多不實用，我便是想要更多もっともっと我還要，越多看起來越爽。

mode屬性會在下文的實現中談到。

MoreMainAxisAlignment.spaceBeside

這個spaceBeside便是上一年那篇文章的需求：child中間的空是兩側的一半

MoreMainAxisAlignment.separate

separate其實效果很像spaceBetween,只是通過設定參數separateCount指定要分離子widget的數量，若是spaceBetween要達到相同效果的話就需求嵌套Flex。

MoreFlex(
  direction: Axis.horizontal,
  moreMainAxisAlignment: MoreMainAxisAlignment.separate,
  separateCount: 3,
  children: [ 5個小球 ],
),

MoreMainAxisAlignment.custom

萬用的形式，通過給customListList<double>的參數，0到1之間指定child的方位，要注意的是給1的話child會剛好彻底超出畫面。

MoreFlex(
  direction: Axis.horizontal,
  moreMainAxisAlignment: MoreMainAxisAlignment.custom,
  customList: const [0, 0.25, 0.35, 0.5, 0.98],
  children: [ 5個小球 ],
),

其他新的MoreMainAxisAlignment

• step系列，是依照等比數列1、2、3…去排的。

• fib系列則是依照Fibonaccisequence斐波那契數列(1,1,2,3,5,8…)，這個系列感覺沒什麼用便是寫好玩的。

實現

在進行layout的時候，會調用render object的performLayout()進行計算。

通過修改performLayout()的內容就可以完成各種騷操作，本文的package便是這樣誕生的。

我在此將計算layout的办法分為5種形式，用來應對不同的計算办法。

enum MainAxisAlignmentMode {
  normal,
  step,
  fib,
  custom,
  separate,
}

通用變量

///剩餘的，可分配的空間
final double remainingSpace = math.max(0.0, actualSizeDelta); 
///前面的空間，在column可看作上方的空間，在row可看作左邊的空間 
late final double leadingSpace;

normal

一般形式，舊的6個MainAxisAlignment和spaceBeside便是用這個形式。

///間隔空間，子組件之間的空間
late final double betweenSpace;

通過計算分配leadingSpace、betweenSpace進行排版。

step與fib

///新定義的單位空間
late final double unitSpace;

运用unitSpace按比例分配子組件之間的空位。

custom

直接运用actualSize 乘上 customList中對應的0-1的double值，便是該子組件放置的方位。

separate

通過separateCount來決定要分離出去的子組件數量，排版到指定子組件時一股腦把remainingSpace放入，簡單粗犷。

寫在最後

• 我在寫step、fib這兩個形式的時候很有以前在刷題的感覺
• 這package是寫來玩的，沒怎麼考慮實用性
• 寫這個package也順便學習了widget test
• 歡迎提pr添加更多種類
• 歡迎意見與糾錯