大家好，我是 17。

在上篇文章 使用 Flutter Button 介紹了如何修改 button 的樣式，本文來具體實(shí)踐一下。

本文列舉一些常用的 button 效果，以便在用到的時(shí)候方便使用。因?yàn)?ElevatedButton 最常用，所以大多以 ElevatedButton 舉例。

ElevatedButton 一般是用做主 button 的。之所以叫 ElevatedButton 是因?yàn)榘聪碌臅r(shí)候會(huì)有 elevation 變大的效果。

去掉水波效果

ElevatedButton(child: Text('IAM17'),style: ButtonStyle(splashFactory: NoSplash.splashFactory),onPressed: () {},)

監(jiān)聽狀態(tài)變化

class _MyWidgetState extends State<MyWidget> {late MaterialStatesController controller;@overridevoid initState() {controller = MaterialStatesController();controller.addListener(() {print(controller.value);});super.initState();}@overridevoid dispose() {controller.dispose();super.dispose();}@overrideWidget build(BuildContext context) {return ElevatedButton(statesController: controller,onPressed: () {},child: Text('IAM17'),);}
}

比如當(dāng)按住按鈕的時(shí)候，會(huì)輸出 {MaterialState.pressed}，當(dāng)松開按鈕的時(shí)候會(huì)輸出{}。被禁用的時(shí)候輸出{MaterialState.disabled}。

shape 動(dòng)畫，size 和 文字樣式

class _MyWidgetState extends State<MyWidget> {var elevation = 10.0;OutlinedBorder shape = CircleBorder();@overridevoid initState() {super.initState();}@overridevoid dispose() {super.dispose();}@overrideWidget build(BuildContext context) {return ElevatedButton(clipBehavior: Clip.hardEdge,style: ElevatedButton.styleFrom(fixedSize: Size(100, 100),textStyle:TextStyle(fontSize: 20),shape: shape,animationDuration: Duration(milliseconds: 600),elevation: elevation),onPressed: () {setState(() {elevation = elevation == 10 ? 20 : 10;shape =shape is CircleBorder ? RoundedRectangleBorder(borderRadius:BorderRadius.circular(10)) : CircleBorder();});},child: Text('IAM17'),);}
}

animationDuration 可以為 elevation 和 shape 提供動(dòng)畫支持。本例中，按鈕從圓形和矩形之間不斷變換，除了 shape 變化，elevation（投影）也會(huì)隨著變化。

默認(rèn)情況下 clip.none。如果按鈕的文字過長會(huì)溢出。設(shè)置 clip.hardEdget 防止溢出。

fixedSize 設(shè)置按鈕的大小，當(dāng)然了，會(huì)受到最大最小值和父級(jí)的約束影響。

文字樣式寫在 style 的 textStyle ，不要去 child 的 Text 那里寫。

foregroundColor、backgroundColor 和 overlayColor

ElevatedButton.styleFrom(splashFactory: NoSplash.splashFactory,foregroundColor: Colors.amber,backgroundColor:Colors.green,) 

foregroundColor 是文字的顏色。別去 child 的 Text 設(shè)置文字顏色了。

backgroundColor 是背景色。

當(dāng)按下按鈕的時(shí)候顯示的是 overlayColor，一般是一個(gè)半透明的，覆蓋在 backgroundColor 上面，child 的下面。styleFrom 是不能設(shè)置 overlayColor 的。overlayColor 直接取 foregroundColor 并設(shè)置好的透明度，一般情況下我們不需要單獨(dú)設(shè)置。單獨(dú)設(shè)置 overlayColor 可以用 ButtonStyle。

ButtonStyle(splashFactory: NoSplash.splashFactory,foregroundColor: MaterialStateProperty.all<Color>(Colors.amber),backgroundColor: MaterialStateProperty.all<Color>(Colors.green),overlayColor: MaterialStateProperty.all<Color>(Colors.pink),)

ButtonStyle 設(shè)置的 overlayColor 是不會(huì)自動(dòng)加上透明效果，如果要透明，需要自己加透明效果。比如Color.fromRGBO(0, 0, 0, .2)。

disabled color

ElevatedButton(style:ElevatedButton.styleFrom(disabledBackgroundColor: Colors.grey,disabledForegroundColor:Colors.black54),onPressed: null,child: Text('IAM17'),)

按鈕 disabled 后，按下去不會(huì)有反應(yīng)了。只需要設(shè)置好 disabledBackgroundColor 和 disabledForegroundColor 即可，overlayColor 不需要設(shè)置了。

給按鈕加邊框

style:ElevatedButton.styleFrom(side: BorderSide()),

圓形

加邊框很簡單，side 屬性就可以辦到。和shape 配合可以做出各種形狀的 border，比如圓形 border。

style:ElevatedButton.styleFrom(shape: CircleBorder(),fixedSize: Size(80,80),side: BorderSide(color: Colors.red,width: 4,strokeAlign: StrokeAlign.inside)

strokeAlign 參數(shù)表示border 是畫在shape 的外部，內(nèi)部還是中間。如果 clipBehavior不為 Clip.none, 那么最好設(shè)置為 StrokeAlign.inside。

還有幾種 shape 也一起介紹下吧。其實(shí)這些 shape 先有個(gè)印象即可，知道有這些 shape 可以用。

BeveledRectangle

style:ElevatedButton.styleFrom(shape: BeveledRectangleBorder(borderRadius: BorderRadius.circular(20)),fixedSize: Size(120,80),side: BorderSide(color: Colors.red,width: 4))

ContinuousRectangle

style:ElevatedButton.styleFrom(shape: ContinuousRectangleBorder( borderRadius: BorderRadius.circular(40)),fixedSize: Size(120,80),side: BorderSide(color: Colors.red,width: 4))

RoundedRectangle

style:ElevatedButton.styleFrom(shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(30)),fixedSize: Size(80,80),side: BorderSide(color: Colors.red,width: 4),

如果把 30 改變?yōu)?40 就變成圓形了。

stadium

style:ElevatedButton.styleFrom(shape: StadiumBorder(),fixedSize: Size(120,80),side: BorderSide(color: Colors.red,width: 4),

stadium 的中文含意是 體育場，我們看形狀也還真挺像的。

不知道你注意到?jīng)]有 和 Text 的樣式一樣，side 也可以寫在 各種 border 里面。但我們寫的時(shí)候，最好都寫在外面的 side 參數(shù)那里。

OutlineButton

OutlineButton 自帶邊框，沒有背景色，沒有 elevation。通常不作為主操作按鈕。

帶 icon 的 button

ElevatedButton.icon(onPressed: () {}, icon: Icon(Icons.account_box), label: Text('IAM17'));

Flutter 這里還是很貼心的，為我們準(zhǔn)備了 icon 命名構(gòu)造函數(shù)。 OulineButton，TextButton也都有 icon 的構(gòu)造函數(shù)。其實(shí)內(nèi)部實(shí)現(xiàn)就是用了一個(gè) Row。

如果只有一個(gè) icon，那么可以用 IconButton 了。

漸變背景 button

ClipRRect(borderRadius: BorderRadius.circular(4),child: Stack(children: <Widget>[Positioned.fill(child: Container(decoration: const BoxDecoration(gradient: LinearGradient(colors: <Color>[Color(0xFF0D47A1),Color(0xFF1976D2),Color(0xFF42A5F5),],),),),),TextButton(style: TextButton.styleFrom(foregroundColor: Colors.white,padding: const EdgeInsets.all(16.0),textStyle: const TextStyle(fontSize: 20),),onPressed: () {},child: const Text('IAM17'),),],),)

由于背景色只能用 Color ，所以要做出一個(gè)漸變背景色的 button 還是很麻煩的，需要疊加才行。最后還得用 ClipRRect 剪裁成圓角。