Flutter ElevatedButton用法

ElevatedButton类以替换了原有的RaisedButton(2020年10月已过时)。

一、ElevatedButton 构造函数：

const ElevatedButton({    Key? key,    required VoidCallback? onPressed, // 点击事件的回调    VoidCallback? onLongPress, // 长按事件的回调    ValueChanged? onHover, // 鼠标悬停事件的回调    ValueChanged? 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(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博客