![](https://img-blog.csdnimg.cn/20200315194630303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

> 注意：無特殊說明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5 
> - Dart版本： 2.7.0

Flutter內建了10多種Button（按鈕）類控制元件供我們使用，瞭解這些控制元件有助於提高我們的開發速度。

## RaisedButton

RaisedButton是一個material風格”凸起“的按鈕，基本用法：

```dart
RaisedButton(
  child: Text('Button'),
  onPressed: (){
  },
)
```

效果：

![](https://upload-images.jianshu.io/upload_images/20353030-045650d9f797b3eb.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

`onPressed`為null或不設定時，按鈕是禁用狀態。

`onHighlightChanged`為高亮變化回撥，按下時處於高亮狀態，抬起處於不高亮狀態，用法如下：

```dart
RaisedButton(
  onHighlightChanged: (high){
  },
  ...
)
```

按鈕可以設定字型及各種狀態顏色，總結如下：

| 屬性              | 說明                               |
| ----------------- | ---------------------------------- |
| textColor         | 字型顏色                           |
| disabledTextColor | 禁用狀態下字型顏色                 |
| color             | 背景顏色                           |
| disabledColor     | 禁用狀態下背景顏色                 |
| highlightColor    | 高亮顏色，按下時的顏色             |
| splashColor       | 水波紋顏色，按下鬆開會有水波紋效果 |

以textColor為例，用法如下：

```dart
RaisedButton(
  textColor: Colors.red,
  ...
)
```

也可以透過textTheme設定字型樣式，用法如下：

```dart
RaisedButton(
  textTheme: ButtonTextTheme.primary,
  ...
)
```

ButtonTextTheme的值介紹如下：

- normal：黑色或者白色字型，依賴於`ThemeData.brightness`
- accent：字型顏色依賴於`ThemeData.accentColor`
- primary ：字型顏色依賴於`ThemeData.primaryColor`

這3個值在MaterialApp控制元件中進行全域性設定，設定如下：

```dart
MaterialApp(
  title: 'Flutter Demo',
  theme: ThemeData(
    primaryColor: Color(0xFF42A5F5),
    accentColor: Colors.yellow,
    brightness: Brightness.light
  ),
  ...
)
```

設定按鈕陰影、高亮陰影、禁用陰影，用法如下：

```dart
RaisedButton(
  elevation: 5.0,
  highlightElevation: 5.0,
  disabledElevation: 5.0,
  ...
)
```

`shape`設定按鈕的形狀，比如設定為圓形，程式碼如下：

```dart
RaisedButton(
  shape: CircleBorder(),
  ...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-297504b7a7627ee9.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

和`hover`相關的屬性是指滑鼠懸停時的狀態，移動端沒有效果，`focus`相關的屬性為獲取焦點時的狀態。

## FlatButton

FlatButton是一個扁平的按鈕，用法和RaisedButton一樣，程式碼如下：

```dart
FlatButton(
  child: Text('Button'),
  color: Colors.blue,
  onPressed: () {},
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-ca903483f244dd8c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## OutlineButton

OutlineButton 是一個帶邊框的按鈕，用法和RaisedButton一樣，程式碼如下：

```dart
OutlineButton(
  child: Text('Button'),
  onPressed: () {},
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-57f91ad45fc11d80.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

設定其邊框樣式，程式碼如下：

```dart
OutlineButton(
  borderSide: BorderSide(color: Colors.blue,width: 2),
  disabledBorderColor: Colors.black,
  highlightedBorderColor: Colors.red,
  child: Text('Button'),
  onPressed: () {},
)
```

效果如下：
![](https://upload-images.jianshu.io/upload_images/20353030-981b897ed20d6cac.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## DropdownButton

DropdownButton為下拉選擇按鈕，基本用法如下：

```dart
var _dropValue = '語文';

_buildButton() {
  return DropdownButton(
    value: _dropValue,
    items: [
      DropdownMenuItem(child: Text('語文'),value: '語文',),
      DropdownMenuItem(child: Text('數學'),value: '數學'),
      DropdownMenuItem(child: Text('英語'),value: '英語'),
    ],
    onChanged: (value){
      setState(() {
        _dropValue = value;
      });
    },
  );
}
```

`items`是點選時彈出選項，`onChanged`選項發生變化時回撥。效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-c7867c6238840102.gif?imageMogr2/auto-orient/strip)

如果你對選中的選項的樣式不滿意，可以自定義，用法如下：

```dart
DropdownButton(
  selectedItemBuilder: (context){
    return [
      Text('語文',style: TextStyle(color: Colors.red),),
      Text('數學',style: TextStyle(color: Colors.red),),
      Text('英語',style: TextStyle(color: Colors.red),)
    ];
  },
  ...
)
```

selectedItemBuilder返回的元件要和`items`中一一對應，選中樣式如下：

![](https://upload-images.jianshu.io/upload_images/20353030-6d829f09dd117d77.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

當使用者未選中時，即value 為null，顯示''請選中"，用法如下：

```dart
DropdownButton(
  hint: Text('請選擇'),
  value: null,
  ...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-6d357a7ea8607b0c.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

預設情況下，下拉選項的圖示是倒立的三角，也可以進行自定義，用法如下：

```dart
DropdownButton(
  icon: Icon(Icons.add),
  iconSize: 24,
  iconDisabledColor: Colors.red,
  iconEnabledColor: Colors.red,
  ...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-60d8194de721e2df.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## RawMaterialButton

RawMaterialButton是基於`Semantics`, `Material`和`InkWell`建立的元件，它不使用當前的系統主題和按鈕主題，用於自定義按鈕或者合併現有的樣式，而RaisedButton和FlatButton都是基於RawMaterialButton配置了系統主題和按鈕主題，相關屬性可以參考RaisedButton，引數基本一樣，基本用法如下：

```dart
RawMaterialButton(
  onPressed: (){},
  fillColor: Colors.blue,
  child: Text('Button'),
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-23c53e4fc39af776.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## PopupMenuButton

PopupMenuButton是一個選單選中控制元件，用法如下：

```dart
PopupMenuButton<string>(
  itemBuilder: (context) {
    return <popupmenuentry>>[
      PopupMenuItem<string>(
        value: '語文',
        child: Text('語文'),
      ),
      PopupMenuItem<string>(
        value: '數學',
        child: Text('數學'),
      ),
      PopupMenuItem<string>(
        value: '英語',
        child: Text('英語'),
      ),
      PopupMenuItem<string>(
        value: '生物',
        child: Text('生物'),
      ),
      PopupMenuItem<string>(
        value: '化學',
        child: Text('化學'),
      ),
    ];
  },
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-f85aecb37e206f3a.gif?imageMogr2/auto-orient/strip)

設定其初始值：

```dart
PopupMenuButton<string>(
  initialValue: '語文',
  ...
)
```

設定初始值後，開啟選單後，設定的值將會高亮，效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-dedb65dff8911679.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

獲取使用者選擇了某一項的值，或者使用者未選中，程式碼如下：

```dart
PopupMenuButton<string>(
  onSelected: (value){
    print('$value');
  },
  onCanceled: (){
    print('onCanceled');
  },
  ...
)
```

`tooltip`是長按時彈出的提示，用法如下：

```
PopupMenuButton<string>(
  tooltip: 'PopupMenuButton',
  ...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-a5856d13d92a1732.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

設定其陰影值、內邊距和彈出選單的背景顏色：

```dart
PopupMenuButton<string>(
  elevation: 5,
  padding: EdgeInsets.all(5),
  color: Colors.red,
  ...
)
```

預設情況下，PopupMenuButton顯示3個小圓點，我們也可以對齊進行設定，設定文字如下：

```dart
PopupMenuButton<string>(
  child: Text('學科'),
  ...
)
```

`child`元件將會被InkWell包裹，點選彈出選單，效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-020e6b2a003bd7e7.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

也可以設定其他圖示：

```dart
PopupMenuButton<string>(
	icon: Icon(Icons.add),
	...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-c86c51d51b03ec29.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

設定彈出選單邊框：

```dart
PopupMenuButton<string>(
  shape: RoundedRectangleBorder(
    side: BorderSide(
      color: Colors.red
    ),
    borderRadius: BorderRadius.circular(10)
  ),
	...
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-5e436c3f63e1776f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## IconButton

IconButton是一個圖示按鈕，用法如下：

```dart
IconButton(
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)
```

設定提示屬性：

```dart
IconButton(
  tooltip: '這是一個圖示按鈕',
  icon: Icon(Icons.person),
  iconSize: 30,
  color: Colors.red,
  onPressed: () {},
)
```

當長按時顯示提示，效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-134ec8c827198cb2.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## BackButton

BackButton是一個material風格的返回按鈕，本身是一個IconButton，點選時預設執行`Navigator.maybePop`即如果路由棧有上一頁則返回到上一頁。

```dart
BackButton()
```

Android和IOS平臺顯示的圖示是不一樣的，ios效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-01f1cb73ed085c11.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

Android效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-fb1d6070f2961fc5.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## CloseButton

CloseButton是一個material風格的關閉按鈕，本身是一個IconButton，點選時預設執行`Navigator.maybePop`即如果路由棧有上一頁則返回到上一頁。

和BackButton適用場景不同，BackButton適用於全屏的頁面，而CloseButton適用於彈出的Dialog。

用法如下：

```dart
CloseButton()
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-a868d8c33e2fc248.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

## ButtonBar

ButtonBar並不是一個單獨的按鈕控制元件，而是末端對齊的容器類控制元件，當在水平方向上沒有足夠空間時候，按鈕將整體垂直排列，而不是換行。基本用法如下：

```dart
ButtonBar(
  children: <widget>[
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
    RaisedButton(),
  ],
)
```

效果如下：

![](https://upload-images.jianshu.io/upload_images/20353030-019f8f97dda27564.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

設定主軸的對齊方式及主軸的尺寸：

```dart
ButtonBar(
  alignment: MainAxisAlignment.center,
  mainAxisSize: MainAxisSize.max,
  ...
)
```

效果如下：

![image-20200315172816904](/Users/mengqingdong/Library/Application Support/typora-user-images/image-20200315172816904.png)

## ToggleButtons

ToggleButtons元件將多個元件組合在一起，並讓使用者從中選擇，ToggleButtons基礎用法如下：

```dart
List<bool> _selecteds = [false, false, true];
ToggleButtons(
      isSelected: _selecteds,
      children: <widget>[
        Icon(Icons.local_cafe),
        Icon(Icons.fastfood),
        Icon(Icons.cake),
      ],
      onPressed: (index) {
        setState(() {
          _selecteds[index] = !_selecteds[index];
        });
      },
    );
```

`isSelected` 屬性是bool型別集合，數量和children的數量一致，`onPressed`是點選回撥，這時就有了不錯了切換按鈕行，效果如下：

![](https://img-blog.csdnimg.cn/20200302204013268.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

我們還可以自定義外觀，比如設定按鈕的顏色：

```dart
ToggleButtons(
      color: Colors.green,
      selectedColor: Colors.orange,
  		fillColor: Colors.red,
      ...
)
```

效果如下：

![](https://img-blog.csdnimg.cn/20200302204538833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

`fillColor`是選中按鈕的背景顏色。

如果不需要邊框，可以將`renderBorder`設定為false：

```dart
ToggleButtons(
	renderBorder: false,
)
```

效果如下：

![](https://img-blog.csdnimg.cn/202003022048026.png)

當然我們也可以設定邊框的圓角半徑、寬度、顏色等：

```dart
ToggleButtons(
      borderRadius: BorderRadius.circular(30),
      borderColor: Colors.orange,
      borderWidth: 3,
      selectedBorderColor: Colors.deepOrange,
）
```

效果如下：

![](https://img-blog.csdnimg.cn/20200302205045496.png)

甚至可以設定點選水波紋顏色（splashColor）和按下時的高亮顏色（highlightColor）：

```
ToggleButtons(
      splashColor: Colors.purple,
      highlightColor: Colors.yellow,
      ）
```

效果如下：

![](https://img-blog.csdnimg.cn/20200302205330240.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc=,size_16,color_FFFFFF,t_70)

如果按鈕處於禁用狀態，可以設定禁用狀態下按鈕及邊框的顏色：

```dart
ToggleButtons(
      onPressed: null,
      disabledColor: Colors.grey[300],
      disabledBorderColor: Colors.blueGrey,
      )
```

效果如下：

![](https://img-blog.csdnimg.cn/20200302205709260.png)

如果開發的是web程式，我們可以設定滑鼠懸停顏色：

```
ToggleButtons(
      hoverColor: Colors.cyan,
      )
```

歡迎加入Flutter的微信交流群(<font color="red">mqd_zzy</font>)，一起學習，一起進步，生活不止眼前的苟且，還有詩和《遠方》。

當然我也非常希望您關注我個人的公眾號，裡面有各種福利等著大家哦。

![](https://upload-images.jianshu.io/upload_images/20353030-9462936ebcbd6fb1.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</widget></bool></widget></string></string></string></string></string></string></string></string></string></string></string></string></popupmenuentry></string>

你知道嗎，Flutter內建了10多種Button控制元件

相關文章