你知道吗，Flutter内置了10多种Button控件
注意：无特殊说明，flutter版本及dart版本如下：
- flutter版本： 1.12.13+hotfix.5
- dart版本： 2.7.0
flutter内置了10多种button（按钮）类控件供我们使用，了解这些控件有助于提高我们的开发速度。
raisedbutton
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
flatbutton是一个扁平的按钮，用法和raisedbutton一样，代码如下：
flatbutton(
child: text('button'),
color: colors.blue,
onpressed: () {},
)
效果如下：
outlinebutton
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
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
rawmaterialbutton是基于semantics, material和inkwell创建的组件，它不使用当前的系统主题和按钮主题，用于自定义按钮或者合并现有的样式，而raisedbutton和flatbutton都是基于rawmaterialbutton配置了系统主题和按钮主题，相关属性可以参考raisedbutton，参数基本一样，基本用法如下：
rawmaterialbutton(
onpressed: (){},
fillcolor: colors.blue,
child: text('button'),
)
效果如下：
popupmenubutton
popupmenubutton是一个菜单选中控件，用法如下：
popupmenubutton<string>(
itembuilder: (context) {
return <popupmenuentry<string>>[
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('化学'),
),
];
},
)
效果如下：
设置其初始值：
popupmenubutton<string>( initialvalue: '语文', ... )
设置初始值后，打开菜单后，设置的值将会高亮，效果如下：
获取用户选择了某一项的值，或者用户未选中，代码如下：
popupmenubutton<string>(
onselected: (value){
print('$value');
},
oncanceled: (){
print('oncanceled');
},
...
)
tooltip是长按时弹出的提示，用法如下：
popupmenubutton<string>( tooltip: 'popupmenubutton', ... )
效果如下：
设置其阴影值、内边距和弹出菜单的背景颜色：
popupmenubutton<string>( elevation: 5, padding: edgeinsets.all(5), color: colors.red, ... )
默认情况下，popupmenubutton显示3个小圆点，我们也可以对齐进行设置，设置文字如下：
popupmenubutton<string>(
child: text('学科'),
...
)
child组件将会被inkwell包裹，点击弹出菜单，效果如下：
也可以设置其他图标：
popupmenubutton<string>(
icon: icon(icons.add),
...
)
效果如下：
设置弹出菜单边框：
popupmenubutton<string>(
shape: roundedrectangleborder(
side: borderside(
color: colors.red
),
borderradius: borderradius.circular(10)
),
...
)
效果如下：
iconbutton
iconbutton是一个图标按钮，用法如下：
iconbutton(
icon: icon(icons.person),
iconsize: 30,
color: colors.red,
onpressed: () {},
)
设置提示属性：
iconbutton(
tooltip: '这是一个图标按钮',
icon: icon(icons.person),
iconsize: 30,
color: colors.red,
onpressed: () {},
)
当长按时显示提示，效果如下：
backbutton
backbutton是一个material风格的返回按钮，本身是一个iconbutton，点击时默认执行navigator.maybepop即如果路由栈有上一页则返回到上一页。
backbutton()
android和ios平台显示的图标是不一样的，ios效果如下：
android效果如下：
closebutton
closebutton是一个material风格的关闭按钮，本身是一个iconbutton，点击时默认执行navigator.maybepop即如果路由栈有上一页则返回到上一页。
和backbutton适用场景不同，backbutton适用于全屏的页面，而closebutton适用于弹出的dialog。
用法如下：
closebutton()
效果如下：
buttonbar
buttonbar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列，而不是换行。基本用法如下：
buttonbar(
children: <widget>[
raisedbutton(),
raisedbutton(),
raisedbutton(),
raisedbutton(),
],
)
效果如下：
设置主轴的对齐方式及主轴的尺寸：
buttonbar( alignment: mainaxisalignment.center, mainaxissize: mainaxissize.max, ... )
效果如下：
togglebuttons
togglebuttons组件将多个组件组合在一起，并让用户从中选择，togglebuttons基础用法如下：
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是点击回调，这时就有了不错了切换按钮行，效果如下：
我们还可以自定义外观，比如设置按钮的颜色：
togglebuttons(
color: colors.green,
selectedcolor: colors.orange,
fillcolor: colors.red,
...
)
效果如下：
fillcolor是选中按钮的背景颜色。
如果不需要边框，可以将renderborder设置为false：
togglebuttons(
renderborder: false,
)
效果如下：
当然我们也可以设置边框的圆角半径、宽度、颜色等：
togglebuttons(
borderradius: borderradius.circular(30),
bordercolor: colors.orange,
borderwidth: 3,
selectedbordercolor: colors.deeporange,
）
效果如下：
甚至可以设置点击水波纹颜色（splashcolor）和按下时的高亮颜色（highlightcolor）：
togglebuttons(
splashcolor: colors.purple,
highlightcolor: colors.yellow,
）
效果如下：
如果按钮处于禁用状态，可以设置禁用状态下按钮及边框的颜色：
togglebuttons(
onpressed: null,
disabledcolor: colors.grey[300],
disabledbordercolor: colors.bluegrey,
)
效果如下：
如果开发的是web程序，我们可以设置鼠标悬停颜色：
togglebuttons(
hovercolor: colors.cyan,
)
欢迎加入flutter的微信交流群(mqd_zzy)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。
当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。