前言

此文其實是我去年這篇抱怨的延伸Flutter 這個MainAxisAlignment沒有我要的對齊方式！

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

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

more_main_axis_alignment

於是我拷貝了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。

less 复制代码

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

MoreMainAxisAlignment.custom

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

php 复制代码

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系列則是按照Fibonacci sequence斐波那契數列(1,1,2,3,5,8...)，這個系列感覺沒什麼用就是寫好玩的。

實現

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

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

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

vbnet 复制代码

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

通用變量👇

sql 复制代码

///剩餘的，可分配的空間 
final double remainingSpace = math.max(0.0, actualSizeDelta); 

///前面的空間，在column可看作上方的空間，在row可看作左邊的空間 
late final double leadingSpace;

normal

一般模式，舊的6個MainAxisAlignment和spaceBeside就是用這個模式。

dart 复制代码

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

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

step與fib

dart 复制代码

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

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

custom

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

separate

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

寫在最後

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

Flutter 我要更多的對齊方式!

前言