Button 在日常中是必不可少的，小菜嘗試過不同類型的 Button，也根據需求自定義過，今天小菜系統的學習一下最基本的 Button；

Flutter 中沒有 Button Widget，但提供了很多不同類型的 Child Button Widget；小菜分析源碼整體可分為 RawMaterialButton 和 IconButton 兩類；

其中 RaisedButton / FlatButton / OutlineButton 繼承自 MaterialButton 且 MaterialButton 是對 RawMaterialButton 的封裝；而BackButton / CloseButton / PopupMenuButton 繼承自 IconButton；最終 RawMaterialButton 和 IconButton 都是由 ConstrainedBox 填充繪制；

IconButton 系列

IconButton 系列屬于圖標按鈕，使用相對簡單；其核心是 InkResponse 水波紋效果；

IconButton

源碼分析

const IconButton({

Key key,

this.iconSize = 24.0, // 圖標大小

this.padding = const EdgeInsets.all(8.0), // 圖標周圍間距

this.alignment = Alignment.center, // 圖標位置

@required this.icon, // 圖標資源

this.color, // 圖標顏色

this.highlightColor, // 點擊高亮顏色

this.splashColor, // 水波紋顏色

this.disabledColor, // 不可點擊時高亮顏色

@required this.onPressed,

this.tooltip // 長按提示

})

分析源碼，其中 icon 和 onPressed 是必須要設置的，其余屬性根據需求而適當調整；

案例嘗試

小菜首先嘗試最基本的 IconButton；長按會由 tooltip 提醒，點擊為默認主題色；

IconButton(icon: Icon(Icons.android), tooltip: 'IconButton tootip1',

onPressed: () => Toast.show('IconButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));

小菜嘗試其中幾個屬性；其中 icon 顏色為 cyan，點擊高亮背景色為 deepPurple，水波紋顏色為 redAccent；注意當 icon 自身設置顏色時 color 屬性不生效；

IconButton(icon: Icon(Icons.android), tooltip: 'IconButton tootip2',

color: Colors.cyan,

highlightColor: Colors.deepPurple.withOpacity(0.4),

splashColor: Colors.redAccent,

onPressed: () => Toast.show('IconButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));

小菜嘗試不可點擊時，icon 顏色為 disabledColor 設置的 green；同樣若 icon 本身設置了顏色，disabledColor 不生效；注意：onPressed: null 與 onPressed: ()=> null 不同，前者代表無點擊事件；后者代表有點擊事件，只是點擊無操作；

IconButton(icon: Icon(Icons.android), disabledColor: Colors.green, onPressed: null);

icon 為 Widget 采用 Icon / Image / ImageIcon 等均可；

IconButton(icon: Image.asset('images/ic_launcher.png'), iconSize: 40.0, onPressed: null);

BackButton

BackButton 作用非常明確，一般用作返回上一個頁面；

源碼分析

const BackButton({ Key key, this.color })

分析源碼，BackButton 繼承自 IconButton，只允許設置圖標顏色，圖標樣式 Android 與 iOS 不同且不可修改；點擊時會優先判斷 maybePop 是否可以返回上一頁；

案例嘗試

BackButton();

BackButton(color: Colors.green);

CloseButton

CloseButton 一般用作導航欄關閉按鈕與 BackButton 類似；

源碼分析

const CloseButton({ Key key }) : super(key: key);

分析源碼，CloseButton 繼承自 IconButton，無需設置任何屬性；點擊時會優先判斷 maybePop 是否可以返回上一頁；

案例嘗試

CloseButton();

RawMaterialButton 系列

RawMaterialButton

RawMaterialButton 是 MaterialButton 的基礎，核心是由 Material 和 InkWell 等組成；但不可用當前 Theme 或 ButtonTheme 來計算未指定參數的默認值；

源碼分析

const RawMaterialButton({

Key key,

@required this.onPressed,

this.onHighlightChanged, // 高亮變化的回調

this.textStyle, // 文字屬性

this.fillColor, // 填充顏色

this.highlightColor, // 背景高亮顏色

this.splashColor, // 水波紋顏色

this.elevation = 2.0, // 陰影

this.highlightElevation = 8.0, // 高亮時陰影

this.disabledElevation = 0.0, // 不可點擊時陰影

this.padding = EdgeInsets.zero, // 內容周圍邊距

this.constraints = const BoxConstraints(minWidth: 88.0, minHeight: 36.0), // 默認按鈕尺寸

this.shape = const RoundedRectangleBorder(), // 形狀樣式

this.animationDuration = kThemeChangeDuration, // 動畫效果持續時長

this.clipBehavior = Clip.none, // 抗鋸齒剪切效果

MaterialTapTargetSize materialTapTargetSize, // 點擊目標的最小尺寸

this.child,

})

分析源碼可知，RawMaterialButton 沒有設置寬高的屬性，可根據 padding 或外層依賴 Container 適當調整位置和大小；默認最小尺寸為 88px * 36px；

案例嘗試

小菜定義了一個基本的按鈕，并監聽其高亮改變時狀態，與我們常見的按鈕基本一致；

RawMaterialButton(

padding: EdgeInsets.all(20.0),

child: Row(mainAxisSize: MainAxisSize.min, children: [

Padding(child: Icon(Icons.android), padding: EdgeInsets.only(right: 10.0)),

Text('RawMaterialButton', style: TextStyle(color: Colors.brown))

]),

textStyle: TextStyle(color: Colors.pink, fontSize: 18.0),

fillColor: Colors.greenAccent.withOpacity(0.4),

highlightColor: Colors.cyan,

splashColor: Colors.deepPurple.withOpacity(0.4),

onPressed: () => Toast.show('RawMaterialButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM),

onHighlightChanged: (state) => Toast.show('onHighlightChanged -> $state', context, duration: Toast.LENGTH_SHORT, gravity: Toast.CENTER))

FloatingActionButton

FloatingActionButton 是 RawMaterialButton 的封裝，主要用于浮動在屏幕內容之上，一般是位于底部左右角或中間；一般一個頁面只有一個；

源碼分析

const FloatingActionButton({

Key key,

this.child,

this.tooltip, // 長按提醒

this.foregroundColor, // 按鈕上子元素顏色

this.backgroundColor, // 背景色

this.heroTag = const _DefaultHeroTag(), // Hero 動畫標簽

this.elevation = 6.0, // 陰影

this.highlightElevation = 12.0, // 高亮時陰影

@required this.onPressed,

this.mini = false, // 尺寸大小，分為 mini 和 default

this.shape = const CircleBorder(), // 樣式形狀

this.clipBehavior = Clip.none, // 抗鋸齒剪切效果

this.materialTapTargetSize, // 點擊目標的最小尺寸

this.isExtended = false, // 是否采用 .extended 方式

})

案例嘗試

小菜嘗試一個基本的 FloatingActionButton；長按會有 tooltip 提示；

floatingActionButton: FloatingActionButton(child: Icon(Icons.android), tooltip: 'FloatingActionButton ToolTip',

onPressed: () => Toast.show('FloatingActionButton', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM));

foregroundColor 為按鈕上層子元素顏色，若子元素本身設置顏色則不生效；backgroundColor 為按鈕背景色；

foregroundColor: Colors.redAccent.withOpacity(0.7),

backgroundColor: Colors.green.withOpacity(0.4),

elevation 按鈕默認陰影高度，即 z軸高度；highlightElevation 為點擊高亮時陰影高度；

elevation: 0.0,

highlightElevation: 10.0,

mini 是否展示成小尺寸模式；materialTapTargetSize 為配置目標的最小點擊尺寸，padded 為默認的 48px * 48px 為 Android 推薦尺寸；shrinkWrap 為縮小到 Material 提供的最小尺寸；

mini: true,

materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,

shape 為樣式尺寸；clipBehavior 為抗鋸齒效果；

shape: RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(14.0))),

clipBehavior: Clip.antiAlias,

heroTag 動畫標簽，默認的是 FloatingActionButtonAnimator.scaling；且 heroTag 默認是相同的，可以自定義為唯一標簽；小菜設置上一頁面與當前頁面 FloatingActionButton 的 heroTag 相同；

floatingActionButtonAnimator: MyAnimation(),

heroTag: "aceTag",

class MyAnimation extends FloatingActionButtonAnimator {

double _x, _y;

@override

Offset getOffset({Offset begin, Offset end, double progress}) {

_x = begin.dx + (end.dx - begin.dx) * progress;

_y = begin.dy + (end.dy - begin.dy) * progress;

return Offset(_x * 0.5, _y * 0.9);

}

@override

Animation getRotationAnimation({Animation parent}) {

return Tween(begin: 1.0, end: 1.0).animate(parent);

}

@override

Animation getScaleAnimation({Animation parent}) {

return Tween(begin: 1.0, end: 1.0).animate(parent);

}

}

FloatingActionButton 提供了 .extended 方式創建代表標簽樣式的，非正方形的按鈕樣式；其余屬性無差；

floatingActionButton: FloatingActionButton.extended(

onPressed: () => Toast.show('FloatingActionButton.extended', context, duration: Toast.LENGTH_SHORT, gravity: Toast.BOTTOM),

icon: Icon(Icons.android),

label: Text('Android'));

針對特殊的個性化，FloatingActionButton 展示的大小可能會有所不同；小菜嘗試了幾種方式；

a. 通過最基本的 RawMaterialButton 實現 FloatingActionButton 樣式，外層添加 Container 約束大小；小菜比較推薦方式一，靈活性更高；

// 方式一

floatingActionButton: Container(

width: 100.0, height: 100.0,

color: Colors.greenAccent.withOpacity(0.4),

child: RawMaterialButton(

shape: CircleBorder(),

elevation: 0.0,

child: Icon(Icons.android),

onPressed: () {}))

b. 借助 FittedBox 將按鈕整體放大到 Container 約束范圍內；

// 方式二

floatingActionButton: Container(

width: 100.0, height: 100.0,

child: FittedBox(

child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {})))

c. SizeBox 與 FittedBox 約束方式不同，只是整體范圍變大，其內部按鈕按 Material 建議樣式展示；

// 方式三

floatingActionButton: SizedBox(

width: 100.0, height: 100.0,

child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {}))

d. scale 與 FittedBox 類似，按比例縮放；

// 方式四

floatingActionButton: Transform.scale(

scale: 1.5,

child: FloatingActionButton(child: Icon(Icons.android), onPressed: () {}))

Button 涉及的內容較多，擴展性很強，小菜分兩節進行學習嘗試；有些理解可能還不到位，有問題請多多指導！

來源： 阿策小和尚

總結

以上是生活随笔為你收集整理的flutter的按钮如何变为不可选中_Flutter 61: 图解基本 Button 按钮小结 (一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。