Material組件庫中的按鈕

Material 組件庫中提供了多種按鈕組件如RaisedButton、FlatButton、OutlineButton等，它們都是直接或間接對RawMaterialButton組件的包裝定制，所以他們大多數(shù)屬性都和RawMaterialButton一樣。在介紹各個按鈕時我們先介紹其默認外觀，而按鈕的外觀大都可以通過屬性來自定義，我們在后面統(tǒng)一介紹這些屬性。另外，所有Material 庫中的按鈕都有如下相同點：

1. 按下時都會有“水波動畫”（又稱“漣漪動畫”，就是點擊時按鈕上會出現(xiàn)水波蕩漾的動畫）。
2. 有一個onPressed屬性來設(shè)置點擊回調(diào)，當(dāng)按鈕按下時會執(zhí)行該回調(diào)，如果不提供該回調(diào)則按鈕會處于禁用狀態(tài)，禁用狀態(tài)不響應(yīng)用戶點擊。

RaisedButton

RaisedButton即"漂浮"按鈕，它默認帶有陰影和灰色背景。按下后，陰影會變大，如圖3-10所示：

3-10

RaisedButton(
  child: Text("normal"),
  onPressed: () {},
);

FlatButton

FlatButton即扁平按鈕，默認背景透明并不帶陰影。按下后，會有背景色，如圖3-11所示：

3-11

FlatButton(
  child: Text("normal"),
  onPressed: () {},
)

OutlineButton

OutlineButton默認有一個邊框，不帶陰影且背景透明。按下后，邊框顏色會變亮、同時出現(xiàn)背景和陰影(較弱)，如圖3-12所示：

3-12

OutlineButton(
  child: Text("normal"),
  onPressed: () {},
)

自定義按鈕外觀

按鈕外觀可以通過其屬性來定義，不同按鈕屬性大同小異，我們以FlatButton為例，介紹一下常見的按鈕屬性，詳細的信息可以查看API文檔。

const FlatButton({
  ...  
  @required this.onPressed, //按鈕點擊回調(diào)
  this.textColor, //按鈕文字顏色
  this.disabledTextColor, //按鈕禁用時的文字顏色
  this.color, //按鈕背景顏色
  this.disabledColor,//按鈕禁用時的背景顏色
  this.highlightColor, //按鈕按下時的背景顏色
  this.splashColor, //點擊時，水波動畫中水波的顏色
  this.colorBrightness,//按鈕主題，默認是淺色主題 
  this.padding, //按鈕的填充
  this.shape, //外形
  @required this.child, //按鈕的內(nèi)容
})

其中大多數(shù)屬性名都是自解釋的，我們不贅述。下面我們通過一個示例來看看如何自定義按鈕。
定義一個背景藍色，兩邊圓角的按鈕。效果如圖3-15所示：

3-15

代碼如下：

FlatButton(
  color: Colors.blue,
  highlightColor: Colors.blue[700],
  colorBrightness: Brightness.dark,
  splashColor: Colors.grey,
  child: Text("Submit"),
  shape:RoundedRectangleBorder(borderRadius: BorderRadius.circular(20.0)),
  onPressed: () {},
)

很簡單吧，在上面的代碼中，我們主要通過shape來指定其外形為一個圓角矩形。因為按鈕背景是藍色(深色)，我們需要指定按鈕主題colorBrightness為Brightness.dark，這是為了保證按鈕文字顏色為淺色。

Flutter 中沒有提供去除背景的設(shè)置，假若我們需要去除背景，則可以通過將背景顏色設(shè)置為全透明來實現(xiàn)。對應(yīng)上面的代碼，便是將 color: Colors.blue 替換為 color: Color(0x000000)。

細心的讀者可能會發(fā)現(xiàn)這個按鈕沒有陰影(點擊之后也沒有)，這樣會顯得沒有質(zhì)感。其實這也很容易，將上面的FlatButton換成RaisedButton就行，其它代碼不用改（這里 color 也不做更改），換了之后的效果如圖3-16所示：

3-16

const RaisedButton({
  ...
  this.elevation = 2.0, //正常狀態(tài)下的陰影
  this.highlightElevation = 8.0,//按下時的陰影
  this.disabledElevation = 0.0,// 禁用時的陰影
  ...
}