Flutter中的按鈕

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

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

可變化的屬性

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

不完美的地方

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

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

在child中處理

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

外面套一個(gè)wrapper

把Button套進(jìn)Container里，在Container的decoration中做背景。這個(gè)方法首先要做的就是把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(
  //...
  ),
);

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

MaterialStateProperty

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

MaterialStatesController

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

邊距問題

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

EnhancedButton

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

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

github: github.com/shirne/exte…

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

以上就是Flutter實(shí)現(xiàn)一個(gè)支持漸變背景的Button示例詳解的詳細(xì)內(nèi)容，更多關(guān)于Flutte 漸變背景 Button的資料請關(guān)注腳本之家其它相關(guān)文章！

最新評論