我才知道原来Flutter内置了10多种Button控件

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(

itemBuilder: (context) {

return <PopupMenuEntry>[

PopupMenuItem(

value: ‘语文’,

child: Text(‘语文’),

),

PopupMenuItem(

value: ‘数学’,

child: Text(‘数学’),

),

PopupMenuItem(

value: ‘英语’,

child: Text(‘英语’),

),

PopupMenuItem(

value: ‘生物’,

child: Text(‘生物’),

),

PopupMenuItem(

value: ‘化学’,

child: Text(‘化学’),

),

];

},

)

效果如下：

设置其初始值：

PopupMenuButton(

initialValue: ‘语文’,

…

)

设置初始值后，打开菜单后，设置的值将会高亮，效果如下：

获取用户选择了某一项的值，或者用户未选中，代码如下：

PopupMenuButton(

onSelected: (value){

print(‘$value’);

},

onCanceled: (){

print(‘onCanceled’);

},

…

)

tooltip是长按时弹出的提示，用法如下：

PopupMenuButton(

tooltip: ‘PopupMenuButton’,

…

)

效果如下：

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

PopupMenuButton(

elevation: 5,

padding: EdgeInsets.all(5),

color: Colors.red,

…

)

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

PopupMenuButton(

child: Text(‘学科’),

…

)

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

也可以设置其他图标：

PopupMenuButton(

icon: Icon(Icons.add),

…

)

效果如下：

设置弹出菜单边框：

PopupMenuButton(

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: [

RaisedButton(),

RaisedButton(),

RaisedButton(),

RaisedButton(),

],

)

效果如下：

设置主轴的对齐方式及主轴的尺寸：

ButtonBar(

alignment: MainAxisAlignment.center,

mainAxisSize: MainAxisSize.max,

…

)

效果如下：

ToggleButtons

---

ToggleButtons组件将多个组件组合在一起，并让用户从中选择，ToggleButtons基础用法如下：

List _selecteds = [false, false, true];

ToggleButtons(

isSelected: _selecteds,

children: [

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,

…

)

推荐学习资料

• Android进阶学习全套手册

  

• Android对标阿里P7学习视频

  

• BAT TMD大厂Android高频面试题

《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！

onPressed: (index) {

setState(() {

_selecteds[index] = !_selecteds[index];

});

},

);

isSelected 属性是bool类型集合，数量和children的数量一致，onPressed是点击回调，这时就有了不错了切换按钮行，效果如下：

我们还可以自定义外观，比如设置按钮的颜色：

ToggleButtons(

color: Colors.green,

selectedColor: Colors.orange,

fillColor: Colors.red,

…

)

推荐学习资料

• Android进阶学习全套手册

  [外链图片转存中…(img-Jtq138e9-1715084732869)]

• Android对标阿里P7学习视频

  [外链图片转存中…(img-IW9Unwxh-1715084732870)]

• BAT TMD大厂Android高频面试题

[外链图片转存中…(img-LoVKdR74-1715084732871)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！