作者 | 弗拉德
來源 | 弗拉德（公眾號：fulade_me)
Material 風格中常用的按鈕有三種RaiseButton、FlatButton、OutlineButton。
這三種按鈕都是繼承了MaterialButton，而MaterialButton又繼承自StatelessWidget。
RaiseButton：帶有陰影效果的按鈕，默認帶有灰色背景，點擊下去會有點擊效果和陰影。
FlatButton: 扁平風格按鈕，點擊下去會有背景顏色。
OutlineButton: 帶有邊框的按鈕，且邊框會在點擊時改變顏色。
1. RaisedButton
我們先來看RaisedButton的構造方法
const RaisedButton({
Key key,
/// 點擊后的回調方法
@required VoidCallback onPressed,
/// 長按后的回調方法
VoidCallback onLongPress,
/// 高亮時候的回調方法
ValueChanged<bool> onHighlightChanged,
/// 鼠標指針的光標進入或懸停在此按鈕(這個用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主題，這個跟MaterialApp的屬性theme有關
ButtonTextTheme textTheme,
/// 文本顏色
Color textColor,
/// 不可點擊時的文本顏色
Color disabledTextColor,
/// 背景顏色
Color color,
/// 可點擊時的背景顏色
Color disabledColor,
/// 獲取焦點時的顏色(用于Web端或PC端)
Color focusColor,
/// 指鼠標懸停時的顏色(用于Web端或PC端)
Color hoverColor,
/// 高亮時的顏色
Color highlightColor,
/// 水波紋顏色，按下松開會有水波紋效果
Color splashColor,
/// 按鈕主題顏色，默認淺色
Brightness colorBrightness,
/// 默認時的 陰影大小
double elevation,
/// 選中時的 陰影大小
double focusElevation,
/// 指鼠標懸停時的陰影大小
double hoverElevation,
/// 高亮時的陰影大小
double highlightElevation,
/// 不可選中時的陰影大小
double disabledElevation,
/// 內邊距 跟布局有關
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 設置按鈕的形狀
ShapeBorder shape,
/// 切邊的樣式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
/// 動畫的時間
Duration animationDuration,
/// 子控件
Widget child,
})
1.1 一個最簡單的RaisedButton
RaisedButton(
child: Text("RaisedButton"),
onPressed: () {},
);
效果:
1.2 不可點擊狀態
RaisedButton(
child: Text("不設置onPressed"),
disabledColor: Colors.blue,
disabledTextColor: Colors.red,
);
如果不設置onPressed參數，默認是不可點擊的，當然我們依然可以設置不可點擊時候的文字顏色和背景顏色。需要注意onPressed是@required參數，不建議不傳此參數。
1.3 文本顏色
RaisedButton(
child: Text("textColor紅色"),
textColor: Colors.red,
onPressed: () {},
);
textColor可以設置文字的顏色。
1.4 設置形狀
RaisedButton(
onPressed: () {},
child: Text("橢圓形"),
shape: StadiumBorder(),
);
通過shape參數可以設置按鈕的形狀，常見的形狀有RoundedRectangleBorder矩形、CircleBorder圓形、StadiumBorder橢圓形、BeveledRectangleBorder八邊形。
1.5 背景顏色
RaisedButton(
child: Text("背景顏色"),
color: Colors.red,
onPressed: () {},
);
通過傳入color可以設置按鈕的背景顏色。
1.6 高亮顏色
RaisedButton(
onPressed: () {},
child: Text("高亮紅色"),
highlightColor: Colors.red,
);
傳入highlightColor參數來設置選中時候的顏色。
1.7 水波紋紅色
RaisedButton(
onPressed: () {},
child: Text("水波紋紅色"),
splashColor: Colors.red,
);
splashColor可以幫助我們設置點擊后的水波紋顏色。
1.8 高亮回調
RaisedButton(
child: Text("高亮變化回調"),
onPressed: () {},
onHighlightChanged: (value) {
print("高亮切換");
},
);
onHighlightChanged可以接收一個回調方法，當按鈕被按下并高亮的時候會回調該方法。
1.9 長按回調
RaisedButton(
child: Text("長按回調"),
onPressed: () {},
onLongPress: () {
print("長按回調");
},
);
onLongPress可以接收一個長按回調方法，當按鈕被長按的時候會回調該方法。
1.10 設置陰影的大小
RaisedButton(
child: Text("陰影設置20"),
onPressed: () {},
elevation: 20.0,
);
elevation參數可以設置陰影的大小，默認的陰影比較小，可以通過此參數設置更大的陰影大小。
想體驗以上代碼運行效果，可以到我的Github倉庫項目flutter_app->lib->routes->flat_button_page.dart，可以下載下來運行并體驗。
2. FlatButton
FlatButton的構造函數參數跟RaisedButton參數基本一致，設置方式也是一樣的。
const FlatButton({
Key key,
/// 點擊后的回調
@required VoidCallback onPressed,
/// 長按后的回調
VoidCallback onLongPress,
/// 點擊 高亮后的回調
ValueChanged<bool> onHighlightChanged,
/// 鼠標指針的光標進入或懸停在此按鈕(這個用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主題，這個跟MaterialApp的屬性theme有關
ButtonTextTheme textTheme,
/// 文字顏色
Color textColor,
/// 不可點擊時的文本顏色
Color disabledTextColor,
/// 背景顏色
Color color,
/// 不可點擊時的背景顏色
Color disabledColor,
/// 獲取焦點時的顏色(用于Web端或PC端)
Color focusColor,
/// 指鼠標懸停時的顏色(用于Web端或PC端)
Color hoverColor,
/// 高亮時的顏色
Color highlightColor,
/// 水波紋顏色，按下松開會有水波紋效果
Color splashColor,
/// 按鈕主題顏色，默認淺色
Brightness colorBrightness,
/// 內邊距 跟布局有關
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 按鈕的形狀
ShapeBorder shape,
/// 切邊的樣式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
MaterialTapTargetSize materialTapTargetSize,
/// 子控件
@required Widget child,
})
2.1 一個最簡單的FlatButton
FlatButton(
child: Text("FlatButton"),
onPressed: () {},
);
我們可以看到相對比于
RaisedButton，FlatButton默認扁平化風格的。
2.2 設置形狀
FlatButton(
onPressed: () {},
child: Text("橢圓形"),
shape: StadiumBorder(),
);
通過傳入shape參數可設置FlatButton的形狀。需要注意的是：設置好的形狀，只有當點擊下去的時候才可以看到效果。
其他的 不可點擊狀態、文本顏色、背景顏色、高亮顏色、水波紋紅色、高亮回調、長按回調等狀態的設置代碼跟
RaisedButton的設置方式一樣。
想體驗FlatButton的運行效果，可以到我的Github倉庫項目flutter_app->lib->routes->flat_button_page.dart，可以下載下來運行并體驗。
3. OutlineButton
我們來看OutlineButton的構造函數
const OutlineButton({
Key key,
/// 點擊后的回調
@required VoidCallback onPressed,
/// 長按后的回調
VoidCallback onLongPress,
/// 鼠標指針的光標進入或懸停在此按鈕(這個用于Web端或PC端)
MouseCursor mouseCursor,
/// 文本的主題，這個跟MaterialApp的屬性theme有關
ButtonTextTheme textTheme,
/// 文字顏色
Color textColor,
/// 不可點擊時的文本顏色
Color disabledTextColor,
/// 背景顏色
Color color,
/// 獲取焦點時的顏色(用于Web端或PC端)
Color focusColor,
/// 指鼠標懸停時的顏色(用于Web端或PC端)
Color hoverColor,
/// 高亮時的顏色
Color highlightColor,
/// 水波紋顏色，按下松開會有水波紋效果
Color splashColor,
/// 高亮時的陰影大小
double highlightElevation,
/// 邊框的延時
this.borderSide,
/// 不可用時 邊框的顏色
this.disabledBorderColor,
/// 選中時邊框的樣色
this.highlightedBorderColor,
/// 內邊距 跟布局有關
EdgeInsetsGeometry padding,
VisualDensity visualDensity,
/// 按鈕的形狀
ShapeBorder shape,
/// 切邊的樣式
Clip clipBehavior = Clip.none,
FocusNode focusNode,
bool autofocus = false,
/// 子控件
Widget child,
})
3.1 簡單的 OutlineButton
OutlineButton(
onPressed: () {},
child: Text("OutlineButton"),
);
它的邊框默認是灰色的，點擊選中的時候會變為藍色。
3.2 Border的樣式
OutlineButton(
child: Text("Border顏色"),
borderSide: BorderSide(color: Colors.red, width: 2),
highlightColor: Colors.yellow,
highlightedBorderColor: Colors.green,
onPressed: () {},
);
borderSide可以接收一個BorderSide的對象，該對象可以設置顏色和寬度，同樣我們也可以通過設置highlightColor和highlightedBorderColor來設置選中的背景顏色和選中的邊框顏色。
其他的 不可點擊狀態、文本顏色、高亮顏色、水波紋紅色、高亮回調、長按回調等狀態的設置代碼跟RaisedButton的設置方式一樣。
想體驗FlatButton的運行效果，可以到我的Github倉庫項目flutter_app->lib->routes->outline_button_page.dart，可以下載下來運行并體驗。
4. IconButton
4.1 簡單的IconButton
IconButton(
icon: Icon(Icons.local_taxi),
onPressed: () {},
);
IconButton可以接收一個Icon類的的參數，Flutter自帶了很多Icon詳情可見這里
4.1 帶有選中提示的IconButton
IconButton(
icon: Icon(Icons.local_cafe),
tooltip: "Cafe Button",
color: Colors.red,
onPressed: () {},
);
通過設置tooltip屬性，可以設置按鈕按下的彈出提示文字。我們這里設置了Cafe Button的文字。
4.2 自定義圖片的IconButton
IconButton(
icon: Image.asset("images/flutter_icon_100.png"),
onPressed: () {},
);
我們同樣可以提供一個Image類型的Icon，這樣就滿足我們設置不同的圖片按鈕。
如下圖：
想體驗IconButton的運行效果，可以到我的Github倉庫項目flutter_app->lib->routes->icon_button_page.dart，可以下載下來運行并體驗。
以上就是Material風格的按鈕以及詳解，如果你想了解Cupertino風格按鈕，可以點擊這里。
我們日常開發中大多數情況下都會使用Material風格的樣式。
