Flutter ElevatedButton用法

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博客