你知道吗，Flutter内置了10多种Button控件

概述注意：无特殊说明，Flutter版本及Dart版本如下： Flutter版本： 1.12.13+hotfix.5 Dart版本： 2.7.0 Flutter内置了10多种Button（按钮）类控件供我

注意：无特殊说明，Flutter版本及Dart版本如下：

Flutter版本： 1.12.13+hotfix.5Dart版本： 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.brightnessaccent：字体颜色依赖于themeData.accentcolorprimary ：字体颜色依赖于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'),)

效果如下：

设置其边框样式，代码如下：

Outlinebutton(  borderSIDe: borderSIDe(color: colors.blue,wIDth: 2),Disabledbordercolor: colors.black,highlightedbordercolor: colors.red,child: Text('button'),)

效果如下：

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是点击时d出选项，onChanged选项发生变化时回调。效果如下：

如果你对选中的选项的样式不满意，可以自定义，用法如下：

Dropdownbutton(  selectedItemBuilder: (context){    return [      Text('语文',style: TextStyle(color: colors.red),Text('数学',Text('英语',)    ];  },...)

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,)

效果如下：

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是长按时d出的提示，用法如下：

PopupMenubutton<String>(  tooltip: 'PopupMenubutton',...)

效果如下：

设置其阴影值、内边距和d出菜单的背景颜色：

PopupMenubutton<String>(  elevation: 5,padding: EdgeInsets.all(5),color: colors.red,...)

默认情况下，PopupMenubutton显示3个小圆点，我们也可以对齐进行设置，设置文字如下：

PopupMenubutton<String>(  child: Text('学科'),...)

child组件将会被InkWell包裹，点击d出菜单，效果如下：

也可以设置其他图标：

PopupMenubutton<String>(	icon: Icon(Icons.add),...)

效果如下：

设置d出菜单边框：

PopupMenubutton<String>(  shape: RoundedRectangleborder(    sIDe: borderSIDe(      color: colors.red    ),borderRadius: borderRadius.circular(10)  ),...)

效果如下：

Iconbutton

Iconbutton是一个图标按钮，用法如下：

Iconbutton(  icon: Icon(Icons.person),iconSize: 30,)

设置提示属性：

Iconbutton(  tooltip: '这是一个图标按钮',icon: Icon(Icons.person),)

当长按时显示提示，效果如下：

Backbutton

Backbutton是一个material风格的返回按钮，本身是一个Iconbutton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。

Backbutton()

AndroID和IOS平台显示的图标是不一样的，ios效果如下：

AndroID效果如下：

@H_862_419@Closebutton

Closebutton是一个material风格的关闭按钮，本身是一个Iconbutton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。

和Backbutton适用场景不同，Backbutton适用于全屏的页面，而Closebutton适用于d出的Dialog。

用法如下：

Closebutton()

效果如下：

buttonbar

buttonbar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列，而不是换行。基本用法如下：

buttonbar(  children: <Widget>[    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)，一起学习，一起进步，生活不止眼前的苟且，还有诗和《远方》。

当然我也非常希望您关注我个人的公众号，里面有各种福利等着大家哦。

总结

以上是内存溢出为你收集整理的你知道吗，Flutter内置了10多种Button控件全部内容，希望文章能够帮你解决你知道吗，Flutter内置了10多种Button控件所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。