## 按鈕
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時來介紹如何實現。
- 緣起
- 起步
- 移動開發技術簡介
- Flutter簡介
- 搭建Flutter開發環境
- 常見配置問題
- Dart語言簡介
- 第一個Flutter應用
- 計數器示例
- 路由管理
- 包管理
- 資源管理
- 調試Flutter APP
- Dart線程模型及異常捕獲
- 基礎Widgets
- Widget簡介
- 文本、字體樣式
- 按鈕
- 圖片和Icon
- 單選框和復選框
- 輸入框和表單
- 布局類Widgets
- 布局類Widgets簡介
- 線性布局Row、Column
- 彈性布局Flex
- 流式布局Wrap、Flow
- 層疊布局Stack、Positioned
- 容器類Widgets
- Padding
- 布局限制類容器ConstrainedBox、SizeBox
- 裝飾容器DecoratedBox
- 變換Transform
- Container容器
- Scaffold、TabBar、底部導航
- 可滾動Widgets
- 可滾動Widgets簡介
- SingleChildScrollView
- ListView
- GridView
- CustomScrollView
- 滾動監聽及控制ScrollController
- 功能型Widgets
- 導航返回攔截-WillPopScope
- 數據共享-InheritedWidget
- 主題-Theme
- 事件處理與通知
- 原始指針事件處理
- 手勢識別
- 全局事件總線
- 通知Notification
- 動畫
- Flutter動畫簡介
- 動畫結構
- 自定義路由過渡動畫
- Hero動畫
- 交錯動畫
- 自定義Widget
- 自定義Widget方法簡介
- 通過組合現有Widget實現
- 實例:TurnBox
- CustomPaint與Canvas
- 實例:圓形漸變進度條(自繪)
- 文件操作與網絡請求
- 文件操作
- Http請求-HttpClient
- Http請求-Dio package
- 實例:Http分塊下載
- WebSocket
- 使用Socket API
- Json轉Model
- 包與插件
- 開發package
- 插件開發:平臺通道簡介
- 插件開發:實現Android端API
- 插件開發:實現IOS端API
- 系統能力調用
- 國際化
- 讓App支持多語言
- 實現Localizations
- 使用Intl包
- Flutter核心原理
- Flutter UI系統
- Element和BuildContext
- RenderObject與RenderBox
- Flutter從啟動到顯示