Flutter實戰(zhàn) 按鈕

#3.4.1 Material組件庫中的按鈕

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

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

#RaisedButton

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

使用RaisedButton非常簡單，如：

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

#FlatButton

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

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

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

#OutlineButton

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

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

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

#IconButton

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

代碼如下：

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

#帶圖標的按鈕

RaisedButton、FlatButton、OutlineButton都有一個icon 構造函數(shù)，通過它可以輕松創(chuàng)建帶圖標的按鈕，如圖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 為例，介紹一下常見的按鈕屬性，詳細的信息可以查看 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所示：

代碼如下：

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

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

是不是有質(zhì)感了！之所以會這樣，是因為RaisedButton默認有配置陰影：

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

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

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