我才知道原来 Flutter 内置了 10 多种 Button 控件，音视频开发工程师抖音
也可以通过 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 个小圆点，我们也可以对齐进行设置，设置文字如下：
PopupMenuBu
tton<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: () {},
)
还未添加个人签名 2021.10.31 加入
还未添加个人简介
评论