Flutter入門進階之旅（八）Button Widget

引言

上一篇博文中咱們學習了GestureDetector，瞭解到藉助GestureDetector能夠賦予某些自己不具有點擊回調的widget點擊回調能力，完成跟用戶的一些簡單手勢交互並做出相應的邏輯處理，咱們還提到了有些widget像RaisedButton和FloatingActionButton控件自己就有onPressed回調，當用戶點擊控件時觸發回調。本篇博客中咱們就把上篇博客中說起到的各類Button歸類統一說明一下。

Button集合效果圖

上述RaisedButton、FlatButton、OutlineButton、MaterialButton、還有RawMaterialButton、FloationgActionButton，我分三類給你們講解，OutlineButton做爲一類，RaisedButton、FlatButton、MaterialButton、RawMaterialButton不管是從構造方法仍是使用上都很類似，這幾個button分爲一類，另外FloatingActionButton做爲一類。

1.OutlineButton：

OutlineButton默認帶有一個邊框，咱們能夠經過屬性指定正常狀態，跟用戶點擊狀態下的邊框顏色。

咱們來看下OutlineButton的構造方法，而且對它的相應屬性作下使用說明。

const OutlineButton({ Key key, @required VoidCallback onPressed, ButtonTextTheme textTheme, //按鈕上字體主題 Color textColor, //字體顏色 Color disabledTextColor, //按鈕禁用時候文字的顏色 Color color, //按鈕背景顏色 Color highlightColor,//點擊或者toch控件高亮的時候顯示在控件上面，水波紋下面的顏色 Color splashColor, //水波紋的顏色 double highlightElevation,//高亮時候的陰影 this.borderSide,//按鈕邊框 this.disabledBorderColor, //按鈕禁用時邊框的顏色 this.highlightedBorderColor,//高亮時邊框的顏色 EdgeInsetsGeometry padding,//邊距 ShapeBorder shape, //設置shape Clip clipBehavior = Clip.none, Widget child, }) 複製代碼

上述OutlineButton效果圖上兩個button的具體代碼：

未指定任何樣式：

new OutlineButton(onPressed: () {}, child: new Text("OutlineButton")),
複製代碼

效果圖

設置邊框樣式

new OutlineButton(
           textColor: Colors.blue,
           highlightedBorderColor: Colors.deepOrange,
           shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
           borderSide: new BorderSide(color: Colors.blueAccent),
           onPressed: () {},
           child: new Text("OutlineButton")
         ),
複製代碼

效果圖

2.FloatingActionButton

FloatingActionButton作過原生安卓開發的讀者應該很熟悉這個名字，在Flutter中不光引用了原生安卓的叫法，使用方法也大同小異。 構造方法

const FloatingActionButton({ Key key, this.child, this.tooltip, this.foregroundColor, this.backgroundColor, this.heroTag = const _DefaultHeroTag(), this.elevation = 6.0,
    this.highlightElevation = 12.0,
    @required this.onPressed,
    this.mini = false,
    this.shape = const CircleBorder(), this.clipBehavior = Clip.none,
    this.materialTapTargetSize,
    this.isExtended = false,
  })
複製代碼

因爲使用方法跟原生安卓中相似，我就不展開詳細講解了，稍後我會把篇首效果圖上的全部代碼貼上，你們可參考裏面對floatingactionbutton的用法。

3.RaisedButton、FlatButton、OutlineButton、MaterialButton

這幾類button十分相似，因此我把他們歸爲一類作講解，可是也會有細微的差異，像FlatButton不支持設置手指點擊擡起後的顏色，其餘常規用法幾乎一致，關於具體的細微差異，讀者可自行對比構造方法，自行測試，我拿RaisedButton把代碼，貼上代碼，爲你們演示下這幾類Button的經常使用屬性配置說明。

new RaisedButton(
            color: Colors.blueAccent,
            //按鈕的背景顏色
            padding: EdgeInsets.all(15.0),
            //按鈕距離裏面內容的內邊距
            textColor: Colors.white,
            //文字的顏色
            textTheme: ButtonTextTheme.normal,
            //按鈕的主題
            onHighlightChanged: (bool b) {
              //水波紋高亮變化回調
            },
            disabledTextColor: Colors.black54,
            //按鈕禁用時候文字的顏色
            disabledColor: Colors.black54,
            //按鈕被禁用的時候顯示的顏色
            highlightColor: Colors.green,
            //點擊或者toch控件高亮的時候顯示在控件上面，水波紋下面的顏色
            splashColor: Colors.amberAccent,
            //水波紋的顏色
            colorBrightness: Brightness.light,
            //按鈕主題高亮
            elevation: 10.0,
            //按鈕下面的陰影
            highlightElevation: 10.0,
            //高亮時候的陰影
            disabledElevation: 10.0,
            //按下的時候的陰影
            shape: new RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            //設置形狀
            onPressed: () {},
            child: new Text("RaisedButton"),
          ),
複製代碼

上述講解中讀者若是有不明白的地方能夠參考文章開篇中貼出的各類button的效果圖源碼作參考，或者留言給我一塊探討，文章開篇中貼出的各類button的效果圖源碼以下。

import 'package:flutter/material.dart';


void main() {
  runApp(new MaterialApp(home: new ButtonPage()));
}
class ButtonPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Button Widget"),
      ),
      floatingActionButton: new FloatingActionButton(
          onPressed: () {}, child: new Icon(Icons.adb), tooltip: "點擊"),
      body: new ListView(
        children: <Widget>[
          new Text("簡單樣式",
              textAlign: TextAlign.center,
              style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
          new RaisedButton(onPressed: () {}, child: new Text("RaisedButton")),
          new FlatButton(onPressed: () {}, child: new Text("FlatButton")),
          new MaterialButton(
              onPressed: () {}, child: new Text("MaterialButton")),
          new RawMaterialButton(
              onPressed: () {}, child: new Text("RawMaterialButton")),
          new OutlineButton(onPressed: () {}, child: new Text("OutlineButton")),
          new SizedBox(height: 20),
          new Text("升級樣式",
              textAlign: TextAlign.center,
              style: new TextStyle(color: Colors.brown, fontSize: 20.0)),
          new RaisedButton(
            color: Colors.blueAccent,
            //按鈕的背景顏色
            padding: EdgeInsets.all(15.0),
            //按鈕距離裏面內容的內邊距
            textColor: Colors.white,
            //文字的顏色
            textTheme: ButtonTextTheme.normal,
            //按鈕的主題
            onHighlightChanged: (bool b) {
              //水波紋高亮變化回調
            },
            disabledTextColor: Colors.black54,
            //按鈕禁用時候文字的顏色
            disabledColor: Colors.black54,
            //按鈕被禁用的時候顯示的顏色
            highlightColor: Colors.green,
            //點擊或者toch控件高亮的時候顯示在控件上面，水波紋下面的顏色
            splashColor: Colors.amberAccent,
            //水波紋的顏色
            colorBrightness: Brightness.light,
            //按鈕主題高亮
            elevation: 10.0,
            //按鈕下面的陰影
            highlightElevation: 10.0,
            //高亮時候的陰影
            disabledElevation: 10.0,
            //按下的時候的陰影
            shape: new RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(20.0)),
            //設置形狀
            onPressed: () {},
            child: new Text("RaisedButton"),
          ),
          new FlatButton(
              color: Colors.lightGreen,
              textColor: Colors.red,
              onPressed: () {}, child: new Text("FlatButton")),
          new OutlineButton(
              textColor: Colors.blue,
              highlightedBorderColor: Colors.deepOrange,
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
              borderSide: new BorderSide(color: Colors.blueAccent),
              onPressed: () {},
              child: new Text("OutlineButton")
          ),
          MaterialButton(
              color: Colors.yellow,
              textColor: Colors.red,
              onPressed: () {},
              child: new Text("MaterialButton")
          ),
          RawMaterialButton(
              fillColor: Colors.deepOrange,
              onPressed: () {},
              child: new Text("RawMaterialButton",style: new TextStyle(color: Colors.white),)
          )
        ],
      ),
    );
  }
}
複製代碼