ElevatedButton类以替换了原有的RaisedButton(2020年10月已过时)。
一、ElevatedButton 构造函数：
const ElevatedButton({
Key? key,
required VoidCallback? onPressed, // 点击事件的回调
VoidCallback? onLongPress, // 长按事件的回调
ValueChanged<bool>? onHover, // 鼠标悬停事件的回调
ValueChanged<bool>? onFocusChange, // 按钮焦点变化的回调
ButtonStyle? style, // 按钮样式（重点）
FocusNode? focusNode, // 按钮焦点
bool autofocus = false, // 是否自动获取焦点
Clip clipBehavior = Clip.none, // 按钮的裁剪形式
required Widget? child, // 按钮内容
}) : super(
key: key,
onPressed: onPressed,
onLongPress: onLongPress,
onHover: onHover,
onFocusChange: onFocusChange,
style: style,
focusNode: focusNode,
autofocus: autofocus,
clipBehavior: clipBehavior,
child: child,
);
如果 onPressed 和 onLongPress 这两个回调函数都没有指定回调函数，则 ElevatedButton 将被禁用并且触摸时没有响应。
二、buttonStyle属性：
const ButtonStyle({
this.textStyle, // 文本的样式 但是对于颜色是不起作用的
this.backgroundColor, // 按钮背景颜色
this.foregroundColor, // 文本及图标颜色
this.overlayColor, // 高亮色，按钮处于focused, hovered, or pressed时的颜色
this.shadowColor, // 阴影颜色
this.elevation, // 这个暂时没研究明白
this.padding, // 按钮内边距
this.minimumSize, // 按钮最小值
this.fixedSize, // 按钮大小
this.maximumSize, // 按钮最大值
this.side, // 边框
this.shape, // 形状-可设置圆角弧度
this.mouseCursor, // 鼠标指针进入或悬停时的光标
this.visualDensity, // 按钮的文字可显示区域的大小
this.tapTargetSize, // 按钮点击区域大小
this.animationDuration, // 动画的持续时间
this.enableFeedback, // 按钮点击时是否提示音
this.alignment, // 按钮子对象的对齐方式
this.splashFactory, // 这个我也不是很清楚，从注释看我的理解是自定义动画的
});
三、示例代码
3.1、基本用法
onPressed及child是必传属性，且 onPressed初始值可以为null，表示按钮处于禁用状态，并为其提供值以启用它。
ElevatedButton(
child: const Text('基本用法'),
onPressed: () {},
),
3.2、X轴铺满
如果想要实现X轴方向铺满，可使用Container或者SizeBox实现。
SizedBox(
width: double.infinity, // 宽度值必须设置为double.infinity
child: ElevatedButton(
child: const Text('铺满的按钮'),
onPressed: () {},
),
)
3.3、带图标的按钮
由于child的类型是一个Widget，意味着我们的按钮内容可以不局限与纯文本。例如实现一个带图标的按钮，我们可以通过给 child 属性分配一个Row对象，在Row对象中包含一个图标和一个文本。但是最佳方法是使用 ElevatedButton.icon 构造函数，除非有特殊的需求需要实现。
// 由于Row，整个按钮会被撑开X轴铺满
ElevatedButton(
child: Row(
children: const [Icon(Icons.abc), Text('铺满的按钮')],
),
onPressed: () {},
),
// 最佳方案
ElevatedButton.icon(
icon: const Icon(Icons.abc),
label: const Text('基本用法'),
onPressed: () {},
),
3.4、实现自定义样式按钮
Container(
height: 46,
margin: const EdgeInsets.only(top: 10, bottom: 10),
child: ElevatedButton(
child: const Text('提 交'),
onPressed: () {},
style: ButtonStyle(
//定义文本的样式 这里设置的文本颜色，但是是不会起作用的
textStyle: MaterialStateProperty.all(
const TextStyle(fontSize: 18)),
// 文本及图标颜色
foregroundColor:
MaterialStateProperty.all<Color>(Colors.red),
// 背景颜色（按照不同的状态分别设置不同的样式）
backgroundColor: MaterialStateProperty.resolveWith(
(states) {
if (states.contains(MaterialState.pressed)) {
//按下时的颜色
return Colors.deepPurple;
}
//默认状态使用灰色
return Colors.blue;
},
),
//设置按钮内边距
padding: MaterialStateProperty.all(
const EdgeInsets.only(left: 24, right: 24)),
//控制按钮的大小
minimumSize: MaterialStateProperty.all(
const Size(double.minPositive, double.minPositive)),
// maximumSize: MaterialStateProperty.all(
// const Size(double.infinity, double.maxFinite)),
//设置阴影 不适用于这里的TextButton
elevation: MaterialStateProperty.all(0),
// 设置按钮圆角大小
shape: MaterialStateProperty.all(
const RoundedRectangleBorder(
borderRadius:
BorderRadius.all(Radius.circular(8))))),
))
在Flutter的按钮中，TextButton、OutlinedButton、IconButton和ElevatedButton的用法基本一致。
3.5、为什么属性值都被MaterialStateProperty.all()包裹？
按钮在操作过程中，存在多种状态。例如：鼠标移入、鼠标移出、鼠标摁下等等状态。MaterialStateProperty.all() 方法是设置点击事件所有状态下都是用同样的样式，MaterialStateProperty.resolveWith() 可分别设置按钮在不同状态下的样式。
四、按钮操作过程中的状态
具体的内容可以查看https://material.io/design/interaction/states.html#usage
相关源码：
enum MaterialState {
/// The state when the user drags their mouse cursor over the given widget.
///
/// See: https://material.io/design/interaction/states.html#hover.
hovered,
/// The state when the user navigates with the keyboard to a given widget.
///
/// This can also sometimes be triggered when a widget is tapped. For example,
/// when a [TextField] is tapped, it becomes [focused].
///
/// See: https://material.io/design/interaction/states.html#focus.
focused,
/// The state when the user is actively pressing down on the given widget.
/// 鼠标摁下
/// See: https://material.io/design/interaction/states.html#pressed.
pressed,
/// The state when this widget is being dragged from one place to another by
/// the user.
///
/// https://material.io/design/interaction/states.html#dragged.
dragged,
/// The state when this item has been selected.
///
/// This applies to things that can be toggled (such as chips and checkboxes)
/// and things that are selected from a set of options (such as tabs and radio buttons).
///
/// See: https://material.io/design/interaction/states.html#selected.
selected,
/// The state when this widget overlaps the content of a scrollable below.
///
/// Used by [AppBar] to indicate that the primary scrollable's
/// content has scrolled up and behind the app bar.
scrolledUnder,
/// The state when this widget is disabled and cannot be interacted with.
///
/// Disabled widgets should not respond to hover, focus, press, or drag
/// interactions.
///
/// See: https://material.io/design/interaction/states.html#disabled.
disabled,
/// The state when the widget has entered some form of invalid state.
///
/// See https://material.io/design/interaction/states.html#usage.
error,
}
五、ElevatedButton.styleFrom()方法
ElevatedButton.styleFrom() 方法简化了ElevatedButton等通过ButtonStyle类自定义样式。
ElevatedButton.icon(
icon: const Icon(Icons.settings),
label: const Text("设置"),
onPressed: () {},
// Use ElevatedButton.styleFrom static method
style: ElevatedButton.styleFrom(
shadowColor: Colors.redAccent,
elevation: 10,
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 30),
minimumSize: const Size(
double.minPositive,
double.minPositive,
)))
六、往期内容：
Flutter专栏_WEB前端李志杰的博客-CSDN博客
Vue专栏_WEB前端李志杰的博客-CSDN博客
