189 8069 5689
这篇文章主要讲解了“Flutter内置几种Button控件”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“Flutter内置几种Button控件”吧！
RaisedButton是一个material风格”凸起“的按钮，基本用法：
RaisedButton(
child: Text('Button'),
onPressed: (){
},
)效果：
onPressed为null或不设置时，按钮是禁用状态。
onHighlightChanged为高亮变化回调，按下时处于高亮状态，抬起处于不高亮状态，用法如下：
RaisedButton(
onHighlightChanged: (high){
},
...
)按钮可以设置字体及各种状态颜色，总结如下：
| 属性 | 说明 |
|---|---|
| textColor | 字体颜色 |
| disabledTextColor | 禁用状态下字体颜色 |
| color | 背景颜色 |
| disabledColor | 禁用状态下背景颜色 |
| highlightColor | 高亮颜色，按下时的颜色 |
| splashColor | 水波纹颜色，按下松开会有水波纹效果 |
以textColor为例，用法如下：
RaisedButton( textColor: Colors.red, ... )
也可以通过textTheme设置字体样式，用法如下：
RaisedButton( textTheme: ButtonTextTheme.primary, ... )
ButtonTextTheme的值介绍如下：
normal：黑色或者白色字体，依赖于ThemeData.brightness
accent：字体颜色依赖于ThemeData.accentColor
primary ：字体颜色依赖于ThemeData.primaryColor
这3个值在MaterialApp控件中进行全局设置，设置如下：
MaterialApp( title: 'Flutter Demo', theme: ThemeData( primaryColor: Color(0xFF42A5F5), accentColor: Colors.yellow, brightness: Brightness.light ), ... )
设置按钮阴影、高亮阴影、禁用阴影，用法如下：
RaisedButton( elevation: 5.0, highlightElevation: 5.0, disabledElevation: 5.0, ... )
shape设置按钮的形状，比如设置为圆形，代码如下：
RaisedButton( shape: CircleBorder(), ... )
效果如下：
和hover相关的属性是指鼠标悬停时的状态，移动端没有效果，focus相关的属性为获取焦点时的状态。
FlatButton是一个扁平的按钮，用法和RaisedButton一样，代码如下：
FlatButton(
child: Text('Button'),
color: Colors.blue,
onPressed: () {},
)效果如下：
OutlineButton 是一个带边框的按钮，用法和RaisedButton一样，代码如下：
OutlineButton(
child: Text('Button'),
onPressed: () {},
)效果如下：
设置其边框样式，代码如下：
OutlineButton(
borderSide: BorderSide(color: Colors.blue,width: 2),
disabledBorderColor: Colors.black,
highlightedBorderColor: Colors.red,
child: Text('Button'),
onPressed: () {},
)效果如下：
DropdownButton为下拉选择按钮，基本用法如下：
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选项发生变化时回调。效果如下：
如果你对选中的选项的样式不满意，可以自定义，用法如下：
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，显示’’请选中”，用法如下：
DropdownButton(
hint: Text('请选择'),
value: null,
...
)效果如下：
默认情况下，下拉选项的图标是倒立的三角，也可以进行自定义，用法如下：
DropdownButton( icon: Icon(Icons.add), iconSize: 24, iconDisabledColor: Colors.red, iconEnabledColor: Colors.red, ... )
效果如下：
RawMaterialButton是基于Semantics,
Material和InkWell创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式，而RaisedButton和FlatButton都是基于RawMaterialButton配置了系统主题和按钮主题，相关属性可以参考RaisedButton，参数基本一样，基本用法如下：
RawMaterialButton(
onPressed: (){},
fillColor: Colors.blue,
child: Text('Button'),
)效果如下：
PopupMenuButton是一个菜单选中控件，用法如下：
