【Flutter 1-17】Flutter手把手教程UI控件——【多圖預警】按鈕RaisedButton、FlatButton、OutlineButton。

做者 | 弗拉德
來源 | 弗拉德（公衆號：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，能夠下載下來運行並體驗。

以上就是Material風格的按鈕以及詳解，若是你想了解Cupertino風格按鈕，能夠點擊這裏。
咱們平常開發中大多數狀況下都會使用Material風格的樣式。

---