ButtonStyle, MaterialStateProperty learned by flutter

在flutter2.0之前,我们使用FlatBUttonand a series of button components,但是在2.0have since been deprecated, 需要被替换成TextBButton.Earlier we were setting the background color of the button,and other related properties can be set directly through the properties.But now the button related properties are set,A property is requiredButtonStyle

除了这种方式,The official also provides similarstyleFrom等静态方法来简化代码.

我们查看styleFrom方法源码,可以发现,The system is also created for usButtonStyleobject and put it back, 而且我们可以发现,How to set the color insideButtonStyleButton.allOrNull<Color>(shadowColor),It is also the color set directly by the method we used above.

我们可以在源码中看到, ButtonStyleThe type of many properties in is MaterialStateProperty. 那么MaterialStateProperty到底是什么？

首先我们看看MaterialStateProperty,在MaterialStatePropertyThere is one in the systemMaterialState枚举,它主要包含了：

• hovered：When the mouse interactive hover stops
• focused：在键盘交互中突出显示
• pressed：通过鼠标、A tap or click initiated by methods such as keyboard or touch
• dragged：用户长按并移动控件时
• selected：例如check box的选定状态
• scrolledUnder：The state of the control when it is duplicated with the scrollable content below
• disabled：When the control or element is not interactive
• error：错误状态下, 比如TextFieldError

随着Web和Desktop平台的发布,原本的FlatButtonCouldn't satisfy the new one very wellUI交互需求,For example, under mouse interactionhovered,所以TextButton开始使用MaterialStateProperty组成的ButtonStyleSupport different platformsUI的状态展示.

在此之前,如果需要多平台适配你可能会这么写,You need to handle a lot of different state requirements,从而产生无数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;
  }

But now you just need to inheritMaterialStateProperty然后重写resolve方法就可以了,例如TextButton里的hovered效果,在TextButton内默认就是通过_TextButtonDefaultOverlay实现,对primary.withOpacity来实现hovered效果.

其实TextButton的内部,默认同样是通过styleFromto configure what is requiredMaterialState效果,其中有：

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

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

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

The remaining parameters are familiar to us 的ButtonStyleButton.allOrNull 方式进行添加,也就是不需要特殊处理的参数.So what does this method do？

其实ButtonStyleButton.allOrNull 就是 MaterialStateProperty.all方法的可null版本,对应内部实现最终还是实现了reslove接口的MaterialStateProperty,所以如果需要支持null,You can also use direct useMaterialStateProperty.all.

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

当然,If you don't want to create new oneclass,But want to specify logic again,你可以使用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),
  ),
),

另外,Sometimes you definitely don't want to set each place individuallystyle,那这时候你就需要配合Theme来实现.
事实上TextButton、ElevatedButton、OutlinedButton都是 ButtonStyleButton的子类,They will abide by the following principles:

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

• widgetValue 就是控件单独配置的样式
• themeValue就是Theme里配置的全局样式
• defaultValue：就是默认内置的样式,也就是styleForm静态方法,当然styleFormThere will be some in thereThemeData的对象,例如colorScheme.primary 、 textTheme.button 、theme.shadowColor等

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

theme: ThemeData(
  primarySwatch: Colors.blue,
  textButtonTheme: TextButtonThemeData(
    // 去掉 TextButton 的水波纹效果
    style: ButtonStyle(splashFactory: NoSplash.splashFactory),
  ),
),