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是一个菜单选中控件，用法如下：
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(
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)
设置提示属性：
IconButton(
tooltip: ‘这是一个图标按钮’,
icon: Icon(Icons.person),
iconSize: 30,
color: Colors.red,
onPressed: () {},
)
当长按时显示提示，效果如下：
BackButton是一个material风格的返回按钮，本身是一个IconButton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。
BackButton()
Android和IOS平台显示的图标是不一样的，ios效果如下：
Android效果如下：
CloseButton是一个material风格的关闭按钮，本身是一个IconButton，点击时默认执行Navigator.maybePop即如果路由栈有上一页则返回到上一页。
和BackButton适用场景不同，BackButton适用于全屏的页面，而CloseButton适用于弹出的Dialog。
用法如下：
CloseButton()
效果如下：
ButtonBar并不是一个单独的按钮控件，而是末端对齐的容器类控件，当在水平方向上没有足够空间时候，按钮将整体垂直排列，而不是换行。基本用法如下：
ButtonBar(
children: [
RaisedButton(),
RaisedButton(),
RaisedButton(),
RaisedButton(),
],
)
效果如下：
设置主轴的对齐方式及主轴的尺寸：
ButtonBar(
alignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
…
)
效果如下：
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-Fqs5LIBg-1715309140035)]
-
Android对标阿里P7学习视频
[外链图片转存中…(img-i0Ov0Swn-1715309140036)]
-
BAT TMD大厂Android高频面试题
[外链图片转存中…(img-uSmOSuo1-1715309140036)]
《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》，点击传送门，即可获取！
2165
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
