你知道吗，Flutter内置了10多种Button控件
老孟程序员 人气:0
> 注意：无特殊说明，Flutter版本及Dart版本如下：
> - Flutter版本： 1.12.13+hotfix.5
> - Dart版本： 2.7.0
Flutter内置了10多种Button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度。
## RaisedButton
RaisedButton是一个material风格”凸起“的按钮，基本用法：
```dart
RaisedButton(
child: Text('Button'),
onPressed: (){
},
)
```
效果：
`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(),
...
)
```
效果如下：
和`hover`相关的属性是指鼠标悬停时的状态，移动端没有效果，`focus`相关的属性为获取焦点时的状态。
## FlatButton
FlatButton是一个扁平的按钮，用法和RaisedButton一样，代码如下：
```dart
FlatButton(
child: Text('Button'),
color: Colors.blue,
onPressed: () {},
)
```
效果如下：
## OutlineButton
OutlineButton 是一个带边框的按钮，用法和RaisedButton一样，代码如下：
```dart
OutlineButton(
child: Text('Button'),
onPressed: () {},
)
```
效果如下：
设置其边框样式，代码如下：
```dart
OutlineButton(
borderSide: BorderSide(color: Colors.blue,width: 2),
disabledBorderColor: Colors.black,
highlightedBorderColor: Colors.red,
child: Text('Button'),
onPressed: () {},
)
```
效果如下：
## 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`选项发生变化时回调。效果如下：
如果你对选中的选项的样式不满意，可以自定义，用法如下：
```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`中一一对应，选中样式如下：
当用户未选中时，即value 为null，显示''请选中"，用法如下：
```dart
DropdownButton(
hint: Text('请选择'),
value: null,
...
)
```
效果如下：
默认情况下，下拉选项的图标是倒立的三角，也可以进行自定义，用法如下：
```dart
DropdownButton(
icon: Icon(Icons.add),
iconSize: 24,
iconDisabledColor: Colors.red,
iconEnabledColor: Colors.red,
...
)
```
效果如下：
## RawMaterialButton
RawMaterialButton是基于`Semantics`, `Material`和`InkWell`创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式，而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题，相关属性可以参考RaisedButton，参数基本一样，基本用法如下：
```dart
RawMaterialButton(
onPressed: (){},
fillColor: Colors.blue,
child: Text('Button'),
)
```
效果如下：
## PopupMenuButton
PopupMenuButton是一个菜单选中控件，用法如下：
```dart
PopupMenuButton
加载全部内容