fluttter学习之ButtonStyle 、MaterialStateProperty

在flutter2.0之前，我们使用FlatBUtton等一系列按钮组件，但是在2.0后都被弃用了， 需要被替换成TextBButton。之前我们在设置按钮的背景颜色，等相关属性都是可以直接通过属性直接设置的。但是现在设置按钮相关属性，需要使用到一个属性ButtonStyle

除了这种方式，官方也提供了类似styleFrom等静态方法来简化代码。

我们查看styleFrom方法源码，可以发现，系统也是给我们创建ButtonStyle对象并放回， 而且我们可以发现，里面设置颜色的方法ButtonStyleButton.allOrNull(shadowColor)，也是我们上面使用的方式直接设置的颜色。

我们可以在源码中看到， ButtonStyle中很多属性的类型是MaterialStateProperty。 那么MaterialStateProperty到底是什么？

首先我们看看MaterialStateProperty，在MaterialStateProperty体系中有一个MaterialState枚举，它主要包含了：

• hovered：鼠标交互悬浮停时
• focused：在键盘交互中突出显示
• pressed：通过鼠标、键盘或则触摸等方法发起的轻击或点击
• dragged：用户长按并移动控件时
• selected：例如check box的选定状态
• scrolledUnder：控件与下方可滚动内容重复时的状态
• disabled：当控件或则元素不能交互性时
• error：错误状态下， 比如TextFieldError

随着Web和Desktop平台的发布，原本的FlatButton无法很好的满足新的UI交互需求，例如鼠标交互下的hovered，所以TextButton开始使用MaterialStateProperty组成的ButtonStyle支持不同平台下的UI的状态展示。

在此之前，如果需要多平台适配你可能会这么写，你需要处理很多不同的状态需求，从而产生无数if或则case：

  getStateColor(Set<MaterialState> states) {
    if (states.contains(MaterialState.hovered)) {
      ///在 hovered 时还 focused 了
      if (states.contains(MaterialState.focused)) {
        return Colors.red;
      } else {
        return Colors.blue;
      }
    } else if (states.contains(MaterialState.focused)) {
      return Colors.yellow;
    }
    return Colors.green;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

但是现在你只需要继承MaterialStateProperty然后重写resolve方法就可以了，例如TextButton里的hovered效果，在TextButton内默认就是通过_TextButtonDefaultOverlay实现，对primary.withOpacity来实现hovered效果。

其实TextButton的内部,默认同样是通过styleFrom来配置所需要的MaterialState效果，其中有：

• _TextButtonDefaultForeground：用于disabled，通过onSurface?.withOpacity(0.38) 变化颜色
  

• _TextButtonDefaultOverlay: 用于处理 hovered 、 focused 和 pressed ，通过 primary.withOpacity 变化颜色；
  

• _TextButtonDefaultMouseCursor ： 用于处理鼠标 MouseCursor 的 disabled；
  

剩下的参数则是通过我们熟悉 的ButtonStyleButton.allOrNull 方式进行添加，也就是不需要特殊处理的参数。那该方法的作用是什么？

其实ButtonStyleButton.allOrNull 就是 MaterialStateProperty.all方法的可null版本，对应内部实现最终还是实现了reslove接口的MaterialStateProperty，所以如果需要支持null，你也可以使用直接使用MaterialStateProperty.all。

static MaterialStateProperty<T>? allOrNull<T>(T? value) => value == null ? null : MaterialStateProperty.all<T>(value);
1

当然，如果你不想创建新的class，但是又想指定逻辑，你可以使用resolveWith静态方法：

TextButton(
  style: ButtonStyle(
      backgroundColor: MaterialStateProperty.resolveWith((states) {
    if (states.contains(MaterialState.hovered)) {
      return Colors.green;
    }
    return Colors.transparent;
  })),
  onPressed: () {},
  child: new Text(
    "TEST",
    style: TextStyle(fontSize: 100),
  ),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14

另外，有时候你肯定不希望每个地方单独去设置style，那这时候你就需要配合Theme来实现。
事实上TextButton、ElevatedButton、OutlinedButton都是 ButtonStyleButton的子类，他们都会遵守一下的原则:

也就是 return widgetValue ?? themeValue ?? defaultValue; ，其中:

• widgetValue 就是控件单独配置的样式
• themeValue就是Theme里配置的全局样式
• defaultValue：就是默认内置的样式，也就是styleForm静态方法，当然styleForm里面也会用一些ThemeData的对象，例如colorScheme.primary 、 textTheme.button 、theme.shadowColor等

所以，例如当你需要全局去除按键的水波纹时，如下代码所示，你可以修改 ThemeData 的 TextButtonTheme 来实现，因为 TextButton 内的 themeStyleOf 使用的就是 TextButtonTheme 。

theme: ThemeData(
  primarySwatch: Colors.blue,
  textButtonTheme: TextButtonThemeData(
    // 去掉 TextButton 的水波纹效果
    style: ButtonStyle(splashFactory: NoSplash.splashFactory),
  ),
),
1
2
3
4
5
6
7