Flutter中的按鈕

自Flutter 1.20 新增了ButtonStyleButton 系列按鈕，可以說非常好用了，默認樣式比之前漂亮了許多，擴展性也增加了很多。按鈕樣式統(tǒng)一由ButtonStyle這個類提供，支持根據(jù)各種狀態(tài)(MaterialState)變化的屬性，也增強了桌面平臺也友好性。

最常用到的就是pressed和disabled還有桌面端的hovered。

可變化的屬性

可以看到默認按鈕樣式，主要針對的是形狀，顏色和交互效果(overlay splash)，普通情況下也夠用的。

不完美的地方

但是，要想進一步定制按鈕效果，比如設計師提供的按鈕，是漸變色的，那怎么辦呢？ 比較常見的做法是用Container自己寫一個按鈕出來。Container的decoration可以說非常好用了，支持單色，漸變，以及裝飾圖。AnimatedContainer還能對各種屬性做動畫展現(xiàn)。

但是 按鈕要做的事情，不止是一個背景這么簡單。比如上面提到的狀態(tài)，以及點擊反饋，語義化等等。要使用Container把這一整套實現(xiàn)出來，會非常繁瑣。

在child中處理

Button的child可以是任何Widget，那么，把Container放到child里來實現(xiàn)定制背景怎樣呢？且不說Button默認的padding之類的，Button的效果，都是在背景層實現(xiàn)的，child中的任何可見元素，都會覆蓋在這層背景之上。簡單來說，就是覆蓋背景的同時會覆蓋掉Button的Splash等overlay效果。

外面套一個wrapper

把Button套進Container里，在Container的decoration中做背景。這個方法首先要做的就是把Button的背景和陰影去除，那么除了在Container里做背景，還要模擬出Button的陰影。

AnimatedContainer(
  duration: Duration(milliseconds:200),
  width: width,
  height: height,
  transformAlignment: Alignment.center,
  clipBehavior: clipBehavior,
  decoration: BoxDecoration(
    gradient: LinearGradient(
    colors: [Colors.blue,Colors.red]
    ),
    shadow: [BoxShadow(
    ...
    )]
  ),
  child: ElevatedButton(
  //...
  ),
);

初步來看，這個方法還是可行的。重點就在于怎么把需要增強的屬性組織起來，并且和按鈕的狀態(tài)結合起來了。

MaterialStateProperty

按鈕的動態(tài)屬性，都是基于這個狀態(tài)屬性處理的，它可以根據(jù)當前的屬性集合，匹配到合適的屬性提供回來。

MaterialStatesController

按鈕狀態(tài)的控制器，可以通過這個控制器來監(jiān)聽按鈕的狀態(tài)，做出對應處理

邊距問題

ButtonStyle中有一個tapTargetSize屬性(非動態(tài)屬性)，定義了點擊目標的擴展邊距，在移動設備上默認情況下按鈕會向上/下多出一點邊距，導致Container的背景比按鈕尺寸多出一塊，按鈕的overlay效果鋪不滿，手動指定TapTargetSize.shrinkWrap就可以了。

EnhancedButton

結合以上想法，整理了style及wrapper實現(xiàn)了一個增加的按鈕，效果如下

本來命名的ExtendedButton，結果被一個不維護的包占用了名字，就改成了EnhancedButton。雖然目前還有些許不完美的方面，以后再慢慢優(yōu)化吧。

github: github.com/shirne/exte…

pub: pub.flutter-io.cn/packages/en…