## 按鈕 Material widget庫中提供了多種按鈕Widget如RaisedButton、FlatButton、OutlineButton等，它們都是直接或間接對RawMaterialButton的包裝定制，所以他們大多數屬性都和`RawMaterialButton`一樣。在介紹各個按鈕時我們先介紹其默認外觀，而按鈕的外觀大都可以通過屬性來自定義，我們在后面統一介紹這些屬性。另外，所有Material 庫中的按鈕都有如下相同點： 1. 按下時都會有“水波動畫”。 2. 有一個`onPressed`屬性來設置點擊回調，當按鈕按下時會執行該回調，如果不提供該回調則按鈕會處于禁用狀態，禁用狀態不響應用戶點擊。 ### RaisedButton RaisedButton 即"漂浮"按鈕，它默認帶有陰影和灰色背景。按下后，陰影會變大，如：  使用RaisedButton非常簡單，如： ``` RaisedButton( child: Text("normal"), onPressed: () => {}, ); ``` ### FlatButton FlatButton即扁平按鈕，默認背景透明并不帶陰影。按下后，會有背景色：  使用FlatButton也很簡單，代碼如下： ``` FlatButton( child: Text("normal"), onPressed: () => {}, ) ``` ### OutlineButton OutlineButton默認有一個邊框，不帶陰影且背景透明。按下后，邊框顏色會變亮、同時出現背景和陰影(較弱)：  使用OutlineButton也很簡單，代碼如下： ``` OutlineButton( child: Text("normal"), onPressed: () => {}, ) ``` ### IconButton IconButton是一個可點擊的Icon，不包括文字，默認沒有背景，點擊后會出現背景：  使用代碼如下： ``` IconButton( icon: Icon(Icons.thumb_up), onPressed: () => {}, ) ``` ### 自定義按鈕外觀 按鈕外觀可以通過其屬性來定義，不同按鈕屬性大同小異，我們以FlatButton為例，介紹一下常見的按鈕屬性，詳細的信息可以查看API文檔。 ``` const FlatButton({ ... @required this.onPressed, //按鈕點擊回調 this.textColor, //按鈕文字顏色 this.disabledTextColor, //按鈕禁用時的文字顏色 this.color, //按鈕背景顏色 this.disabledColor,//按鈕禁用時的背景顏色 this.highlightColor, //按鈕按下時的背景顏色 this.splashColor, //點擊時，水波動畫中水波的顏色 this.colorBrightness,//按鈕主題，默認是淺色主題 this.padding, //按鈕的填充 this.shape, //外形 @required this.child, //按鈕的內容 }) ``` 其中大多數屬性名都是自解釋的，我們不贅述。下面我們通過一個示例來看看如何自定義按鈕。 #### 示例 定義一個背景藍色，兩邊圓角的按鈕。效果如下：  代碼如下： ``` 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`，這是為了保證按鈕文字顏色為淺色。 細心的讀者可能會發現這個按鈕沒有陰影(點擊之后也沒有)，這樣會顯得沒有質感。其實這也很容易，將上面的`FlatButton`換成`RaisedButton`就行，其它代碼不用改，換了之后我們看看效果：  是不是有質感了！之所以會這樣，是因為`RaisedButton`默認有配置陰影： ``` const RaisedButton({ ... this.elevation = 2.0, //正常狀態下的陰影 this.highlightElevation = 8.0,//按下時的陰影 this.disabledElevation = 0.0,// 禁用時的陰影 ... } ``` 值得注意的是，在Material widget庫中，我們會在很多widget中見到elevation相關的屬性，它們都是用來控制陰影的，這是因為陰影在Material設計風格中是一種很重要的表現形式，以后在介紹其它widget時，便不再贅述。 如果我們想實現一個背景漸變的圓角按鈕，按鈕有沒有相應的屬性呢？答案是否定的，但是，我們可以通過其它方式來實現，本文將在后面介紹Container時來介紹如何實現。