Flutter實(shí)戰(zhàn) 按鈕

#3.4.1 Material組件庫中的按鈕

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

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

#RaisedButton

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

使用RaisedButton非常簡單，如：

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

#FlatButton

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

使用 FlatButton 也很簡單，代碼如下：

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

#OutlineButton

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

使用OutlineButton也很簡單，代碼如下：

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

#IconButton

IconButton是一個(gè)可點(diǎn)擊的 Icon，不包括文字，默認(rèn)沒有背景，點(diǎn)擊后會出現(xiàn)背景，如圖3-13所示：

代碼如下：

IconButton(
  icon: Icon(Icons.thumb_up),
  onPressed: () {},
)

#帶圖標(biāo)的按鈕

RaisedButton、FlatButton、OutlineButton都有一個(gè)icon 構(gòu)造函數(shù)，通過它可以輕松創(chuàng)建帶圖標(biāo)的按鈕，如圖3-14所示：

代碼如下：

RaisedButton.icon(
  icon: Icon(Icons.send),
  label: Text("發(fā)送"),
  onPressed: _onPressed,
),
OutlineButton.icon(
  icon: Icon(Icons.add),
  label: Text("添加"),
  onPressed: _onPressed,
),
FlatButton.icon(
  icon: Icon(Icons.info),
  label: Text("詳情"),
  onPressed: _onPressed,
),

#3.4.2 自定義按鈕外觀

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

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

其中大多數(shù)屬性名都是自解釋的，我們不贅述。下面我們通過一個(gè)示例來看看如何自定義按鈕。

#示例

定義一個(gè)背景藍(lán)色，兩邊圓角的按鈕。效果如圖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來指定其外形為一個(gè)圓角矩形。因?yàn)榘粹o背景是藍(lán)色(深色)，我們需要指定按鈕主題colorBrightness為Brightness.dark，這是為了保證按鈕文字顏色為淺色。

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

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

是不是有質(zhì)感了！之所以會這樣，是因?yàn)?code>RaisedButton默認(rèn)有配置陰影：

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

值得注意的是，在 Material 組件庫中，我們會在很多組件中見到 elevation 相關(guān)的屬性，它們都是用來控制陰影的，這是因?yàn)殛幱霸?Material 設(shè)計(jì)風(fēng)格中是一種很重要的表現(xiàn)形式，以后在介紹其它組件時(shí)，便不再贅述。

如果我們想實(shí)現(xiàn)一個(gè)背景漸變的圓角按鈕，按鈕有沒有相應(yīng)的屬性呢？答案是否定的，但是，我們可以通過其它方式來實(shí)現(xiàn)，我們將在后面"自定義組件"一章中實(shí)現(xiàn)。